使用overflow-x在IOS上使用加速/减速平滑原生样式滑动滚动：滚动；使用 CSS 的可滚动 div答案

【问题标题】：Smooth native style swipe scrolling with acceleration/deceleration on IOS using overflow-x: scroll; scrollable div using CSS使用overflow-x在IOS上使用加速/减速平滑原生样式滑动滚动：滚动；使用 CSS 的可滚动 div
【发布时间】：2013-09-16 02:30:44
【问题描述】：

使用可滚动的 div

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

DEMO在Android设备上滑动时滚动很流畅，甚至有加速和减速。

iPhone 上的相同代码，滚动很僵硬。当用户松开触摸时，滚动立即停止。

如何让 iPhone 将可滚动的 div 视为具有平滑加速/减速原生样式滚动的 Android 浏览器？

【问题讨论】：

标签： ios html css mobile

【解决方案1】：

您可以使用以下专有 CSS 属性在带有 overflow 的 HTML 元素上获得原生样式的滚动：

-webkit-overflow-scrolling: touch;

不过，它有一些警告。根据元素内部的内容，渲染可能会略有损坏，因此您应该对其进行测试，看看它是否适合您的特定需求。当您指定overflow-y: hidden 时，我也不确定它是否正常工作。如果没有，您应该可以通过使用 overflow-x、overflow-y 和 overflow 的不同值来使其工作（auto 似乎不起作用）。

如果需要，您可以在 div 上伪造 overflow-y: hidden，方法是使用内容创建第二个嵌套 div 并在其上设置该属性。但我希望这不是必需的。

【讨论】：

你太棒了。我不知道这存在。
谢谢！另一个警告：如果您尝试在 WebKit 中始终使用stackoverflow.com/questions/7855590/… 显示滚动条，这将再次隐藏它们。在这里发现了一个问题：stackoverflow.com/questions/28871556/…
另一个警告似乎是用户失去了点击状态栏以跳转到页面顶部的能力。
奇怪的是，MDN 不鼓励这种 CSS (Do not use it on production sites facing the Web) 但它确实有效！
这对我不起作用。至少不适用于 chrome（移动或桌面）开发工具说“未知属性名称”

【解决方案2】：

Marco Aurélio 的建议实际上是最好的解决方案。如果您设置overflow-y: scroll 并在元素中添加-webkit-overflow-scrolling: touch，则效果最佳。你会得到一种原生的滚动感觉

【讨论】：

【解决方案3】：

好的，这对我有用：

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}

【讨论】：