使用overflow时,在mobile/ios上滚动速度很慢:滚动

Question

要设置一个非画布菜单,我必须将主体设置为"overflow:hidden"以从主体中删除滚动并使用"overflow-y:scroll"将其重新添加到内容周围的容器中.当我这样做时,它似乎减慢了移动专用iOS设备上的滚动速度.

将滚动条从主体移动会有某种性能问题吗？

Answer 1

而不是性能问题,这可能是你没有看到你的iOS设备上的"Momentum"滚动

这可以通过向滚动元素添加'-webkit-overflow-scrolling:touch'来解决,即:

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

默认情况下,iOS设备在主体上使用"动量"滚动但是向元素添加"overflow-y:scroll"不会将元素设置为"动量"滚动默认情况下

有关详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

注意:有一些使用-webkit-overflow-scrolling的Gotcha/Bugs:触摸某些浏览器