如何在iOS浏览器上禁用惯性滚动？

Question

我需要在 iPad 的body元素上禁用惯性滚动,但是能够在没有惯性的情况下滚动页面.

我一直在寻找一些时间,但我没有找到任何好的解决方案.也许我只是不寻找正确的事情？是否有任何黑客或解决方法可以实现这一目标？

Answer 1

将其添加到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;默认值.

这项工作,但需要付出代价.你失去了平滑的滚动. (2认同)
我已经单独尝试过这个，并与“overflow:hidden”结合使用，但我认为这不再适用于 iOS。尝试在这里可视化它：https://codepen.io/calsal/full/Exxjwwo。桌面上的滚动被禁用。在 iOS Safari 上（先向下滚动一点，然后向上滚动），我仍然会遇到惯性效应。如果我错了请指教。 (2认同)

Answer 2

您可以使用带有溢出属性的 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%;
}