ios - 使用 overflow-x : scroll; scrollable div using CSS 在 IOS 上使用加速/减速平滑 native 样式滑动滚动

Question

使用可滚动的 div

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

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

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

如何让 iPhone 像 Android 浏览器一样处理可滚动的 div，并提供流畅的加速/减速原生样式滚动？

Answer 1

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

-webkit-溢出滚动:触摸；

不过，它有一些注意事项。根据元素内部的内容，渲染可能会稍微中断，因此您应该对其进行测试，看看它是否适合您的特定需求。当您指定 overflow-y: hidden 时，我也不确定它是否正常工作。如果没有，您应该能够通过为 overflow-x、overflow-y 和 overflow 设置不同的值来让它工作code>(auto 似乎不起作用)。

如果需要，您可以通过创建第二个嵌套的 div 来在您的 div 上伪装 overflow-y: hidden 和在其上设置该属性。但我希望这不是必需的。