使用溢出时，移动/ ios上的滚动速度较慢：滚动 [英] Scrolling slow on mobile/ios when using overflow:Scroll

问题描述

要设置一个画布外菜单，我必须设置body为overflow：hidden从主体中删除滚动，并将其添加回一个容器周围的内容与overflow-y：scroll。当我这样做，似乎减慢在移动的iOS设备上的滚动。

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.

从身体移动滚动条有某种性能问题吗？

Is there some sort of performance issue with moving the scrollbar from the body?

推荐答案

而不是性能问题，这可能是因为您在iOS设备上没有看到Momentum滚动

Rather than a performance issue this is likely that your not seeing 'Momentum' scrolling on your iOS device

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

This can be solved by adding '-webkit-overflow-scrolling:touch' to your scrolling element i.e:

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

设备使用body的动量滚动，但在元素中添加overflow-y：scroll。默认情况下不将元素设置为momentum滚动

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

a href =https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling> https://developer.mozilla.org/en-US/docs/Web/ CSS / -webkit-overflow-scrolling 获取更多信息

See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling for more info

注意：使用-webkit-overflow-scrolling有一些Gotcha /某些浏览器

Note: there's a number of Gotcha/Bugs with using -webkit-overflow-scrolling: touch on certain browsers

这篇关于使用溢出时，移动/ ios上的滚动速度较慢：滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！