使用溢出时在移动/ios上滚动缓慢：滚动

Posted 2023-03-31

【中文标题】使用溢出时在移动/ios上滚动缓慢：滚动

【英文标题】：Scrolling slow on mobile/ios when using overflow:Scroll

【发布时间】：2015-11-09 01:28:54

【问题描述】：

要设置画布外菜单，我必须将主体设置为“overflow:hidden”，以从主体中移除滚动，然后使用“overflow-y:scroll”将其重新添加到内容周围的容器中。当我这样做时，它似乎会减慢移动设备上的滚动速度，尤其是 ios 设备。

从正文中移动滚动条是否存在某种性能问题？

【参考方案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 设备在 body 上使用 'momentum' 滚动，但向元素添加 'overflow-y:scroll' 不会默认将元素设置为 'momentum' 滚动

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

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

【讨论】：

//A value... 在这种情况下不是有效的 CSS 注释，我使用了 /* */。请参阅 (xanthir.com/b4U10)。

谢谢你。我现在将使用它，但是这个问题还有其他解决方案吗？ MDN 文档说它是非标准的，不应该在生产站点中使用。

@AvrilAlejandro：它在 iphone7 中无法正常工作，先生第一次滚动不起作用，整个屏幕都冻结了先生。先生，您知道这背后的问题是什么吗？

-webkit-overflow-scrolling 不是标准属性，可能删除了兼容性：| @卡皮尔索尼

好的，先生，在删除我为修复 iphone7 中的滚动所做的工作后？