如何禁用iOS浏览器机身上的惯性滚动

How to disable inertial scrolling on body for iOS browsers?

本文关键字：滚动 何禁用 iOS 浏览器机      更新时间：2023-09-26

我需要禁用iPad机身元素上的惯性滚动，但保持在没有惯性的情况下滚动页面的能力。

我已经找了一段时间，但没有找到任何好的解决方案。也许我只是没有找到合适的东西？有没有什么破解或变通方法可以让这成为可能？

将其添加到body元素的CSS:

-webkit-overflow-scrolling: auto;

-webkit-overflow-scrolling的默认值为touch。这告诉iOS设备使用"惯性"滚动。文档：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

@meuwka答案实现了您的目标，但以一种迂回的方式——它之所以有效，是因为div元素的默认值是-webkit-overflow-scrolling: auto;。

您可以使用带有溢出属性的div，它会杀死平滑的iOS滚动

<body>
  <div class="scroll">
    long long text...
  <div>
</body>

Css

html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

http://jsbin.com/palixi/edit

我使用了inobounce，可以在中找到

您会注意到，您必须为想要滚动的元素指定height属性和overflow: auto，包括-webkit-overflow-scrolling: touch;。医生解释得很好。

仅将-webkit-overflow-scrolling规则设置为html和body对我不起作用。

我不得不在swift中的viewDidLoad函数中设置webView.scrollView.bounces = false。试试看，如果它能解决你的问题，请告诉我们。

iOS13更改：

iOS和iPadOS上的加速滚动

加速滚动主框架始终可用iOS上的WebKit。此外，开发人员可以使用名为-webkit溢出滚动可选择快速滚动进行溢出滚动。iPadOS和iOS 13不需要这些。子框架不再扩展到其内容的大小，现在可滚动，溢出：滚动；iframe总是加速滚动。不再需要快速滚动模拟库-webkit溢出滚动：触摸；是iPad上的一个禁止操作。在iPhone上，它仍然有在可滚动元素。开发人员将希望测试他们的内容以查看硬件加速滚动对它的影响和删除不必要的变通办法。

相关文章：