使用溢出时在移动设备/ios 上滚动缓慢:滚动

问题描述

要设置画布外菜单，我必须将正文设置为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*/
}

默认情况下，iOS 设备在主体上使用 'momentum' 滚动，但向元素添加 '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

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling 了解更多信息

注意:使用 -webkit-overflow-scrolling: touch 在某些浏览器上存在许多问题/错误

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

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