Html 使用溢出-x：滚动在IOS上使用加速/减速平滑原生样式滑动滚动；使用 CSS 的可滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18751811/
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
Smooth native style swipe scrolling with acceleration/deceleration on IOS using overflow-x: scroll; scrollable div using CSS
提问by Aaron
Using a scrollable div
使用可滚动的 div
.scrollable-div{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
DEMOon Android devices the scrolling on swipe is smooth and even has acceleration & deceleration.
Android 设备上的DEMO滑动滚动流畅，甚至有加速和减速。
The same code on an iPhone, the scrolling is stiff. When the user releases touch the scrolling stops immediately.
iPhone 上的相同代码，滚动很僵硬。当用户释放触摸时，滚动立即停止。
How do you make the iPhone treat the scrollable div like an Android browser with smooth acceleration/deceleration native style scrolling?
你如何让 iPhone 将可滚动的 div 视为具有平滑加速/减速原生样式滚动的 Android 浏览器？
回答by Marco Aurélio
You can get native-style scrolling on an HTML element with overflowby using the following proprietary CSS property:
您可以overflow使用以下专有 CSS 属性在 HTML 元素上获得原生样式的滚动：
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
It has some caveats, though. Depending on what's inside the element, rendering might be slightly broken, so you should test it and see if it suits your particular needs. I'm also not sure if it works properly when you specify overflow-y: hidden. If it doesn't, you should be able to get it to work by playing around with different values for overflow-x, overflow-yand overflow(autodoesn't seem to work).
不过，它有一些警告。根据元素内部的内容，渲染可能会稍微损坏，因此您应该对其进行测试，看看它是否适合您的特定需求。我也不确定当您指定overflow-y: hidden. 如果没有，您应该能够通过对overflow-x, overflow-yand overflow(auto似乎不起作用)使用不同的值来使其工作。
If you need to, you can fake overflow-y: hiddenon your divby creating a second nested divwith the content and setting that property on it. But I hope that's not necessary.
如果需要，您可以通过创建第二个嵌套的内容并在其上设置该属性来伪造overflow-y: hidden您的内容。但我希望这没有必要。divdiv
回答by Dionys Lucifer
The suggestion from Marco Aurélio is actually the best solution. It works best if you set overflow-y: scrollAND adding -webkit-overflow-scrolling: touchto the element as well. You'll get a native-like scroll feeling
Marco Aurélio 的建议实际上是最好的解决方案。如果您也设置overflow-y: scrollAND 添加-webkit-overflow-scrolling: touch到元素，则效果最佳。你会得到一种原生的滚动感觉
回答by meck373
Ok, this is what works for my:
好的，这对我有用：
body, html {
overflow-x:hidden;
-webkit-overflow-scrolling: touch;
}
