Javascript 如何为 iOS 浏览器禁用身体上的惯性滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26235878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable inertial scrolling on body for iOS browsers?
提问by Finglish
I need to disable the inertial scrolling on the body elementfor iPad, but keep the ability to scroll the page without the inertia.
我需要在iPad的 body 元素上禁用惯性滚动，但保持在没有惯性的情况下滚动页面的能力。
I have been looking for some time but I haven't found any good solutions. Maybe I am just not looking for the right thing? Is there any hack or workaround that could make this possible?
我一直在寻找一段时间，但我还没有找到任何好的解决方案。也许我只是没有在寻找正确的东西？是否有任何黑客或解决方法可以使这成为可能？
采纳答案by meuwka
You can use div with overflow property, it kill smooth iOS scroll
您可以使用带有溢出属性的 div，它会阻止平滑的 iOS 滚动
<body>
<div class="scroll">
long long text...
<div>
</body>
Css
css
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.scroll {
overflow: auto;
height: 100%;
}
回答by Chris W.
Add this to the bodyelement's CSS:
将此添加到body元素的 CSS：
-webkit-overflow-scrolling: auto;
The default for -webkit-overflow-scrollingis touch. That tells iOS devices to use "inertial" scrolling. The docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
默认为-webkit-overflow-scrollingIS touch。这告诉 iOS 设备使用“惯性”滚动。文档：https: //developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
@meuwka answer achieves your goal, but in a roundabout way—it works because divelements have -webkit-overflow-scrolling: auto;as their default.
@meuwka 的答案实现了您的目标，但是以一种迂回的方式 - 它有效，因为div元素具有-webkit-overflow-scrolling: auto;默认值。
回答by Mike
I've used inobouncewhich can be found here
我用过inobounce可以在这里找到
You'll notice you have to specify a heightproperty and overflow: autoto the element you'd like scrollable, including -webkit-overflow-scrolling: touch;. The docs do a good job at explaining.
你会注意到你必须指定一个height属性和overflow: auto你想要滚动的元素，包括-webkit-overflow-scrolling: touch;. 文档在解释方面做得很好。
回答by Simon
Just setting the -webkit-overflow-scrollingrule to html and body doesn't work for me.
只是将-webkit-overflow-scrolling规则设置为 html 和 body 对我不起作用。
I had to set webView.scrollView.bounces = falsein the viewDidLoad func in swift.Try it and let us know if it solves your problem.
我必须webView.scrollView.bounces = false在 swift 中的 viewDidLoad 函数中进行设置。尝试一下，让我们知道它是否解决了您的问题。
回答by Simon_Weaver
Accelerated Scrolling on iOS and iPadOS
在 iOS 和 iPadOS 上加速滚动
Accelerated scrolling the main frame has always been available with WebKit on iOS. In addition, developers could use a CSS property called -webkit-overflow-scrolling to opt-in to fast scrolling for overflow scroll. None of that is necessary with iPadOS and iOS 13. Subframes are no longer extended to the size of their contents and are now scrollable, and overflow: scroll; and iframe always get accelerated scrolling. Fast scrolling emulation libraries are no longer needed and -webkit-overflow-scrolling: touch; is a no-op on iPad. On iPhone, it still has the side-effect of creating a CSS stacking context on scrollable elements. Developers will want to test their content to see how hardware accelerated scrolling everywhere affects it and remove unnecessary workarounds.
iOS 上的 WebKit 始终可以加速滚动主框架。此外，开发人员可以使用名为 -webkit-overflow-scrolling 的 CSS 属性来选择快速滚动以进行溢出滚动。iPadOS 和 iOS 13 不需要这些。子帧不再扩展到其内容的大小，现在可以滚动，溢出：滚动；和 iframe 总是得到加速滚动。不再需要快速滚动仿真库和 -webkit-overflow-scrolling: touch; 在 iPad 上没有操作。在 iPhone 上，它仍然具有在可滚动元素上创建 CSS 堆叠上下文的副作用。开发人员将希望测试他们的内容，以了解随处硬件加速滚动如何影响它并消除不必要的解决方法。
