CSS 使用溢出时在移动设备/ios 上滚动缓慢:滚动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33601165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling slow on mobile/ios when using overflow:Scroll
提问by grasesed
To setup an off-canvas menu I have to set the body to "overflow:hidden" to remove scrolling from the body and add it back in to a container around the content with "overflow-y:scroll". When I do this it seems to slow the scrolling on mobile specifically iOS devices.
要设置画布外菜单,我必须将正文设置为“溢出:隐藏”以从正文中删除滚动并将其添加回带有“溢出-y:滚动”的内容周围的容器中。当我这样做时,它似乎会减慢移动设备(尤其是 iOS 设备)的滚动速度。
Is there some sort of performance issue with moving the scrollbar from the body?
从身体移动滚动条是否存在某种性能问题?
回答by sjm
Rather than a performance issue this is likely that your not seeing 'Momentum' scrolling on your iOS device
这可能不是性能问题,而是您在 iOS 设备上看不到“Momentum”滚动
This can be solved by adding '-webkit-overflow-scrolling:touch' to your scrolling element i.e:
这可以通过向滚动元素添加“-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*/
}
By default iOS devices use 'momentum' scrolling on the body but adding 'overflow-y:scroll' to an element does Not set a element to 'momentum' scrolling by default
默认情况下,iOS 设备在主体上使用“momentum”滚动,但将“overflow-y:scroll”添加到元素不会默认将元素设置为“momentum”滚动
See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrollingfor more info
有关更多信息,请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Note: there's a number of Gotcha/Bugs with using -webkit-overflow-scrolling: touch on certain browsers
注意:使用 -webkit-overflow-scrolling: touch 在某些浏览器上有很多问题/错误