46

使用可滚动的 div

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

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

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

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

4

3 回答 3

109

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

-webkit-overflow-scrolling: touch;

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

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

于 2013-09-11T22:25:12.217 回答
1

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

于 2015-08-20T08:12:17.503 回答
0

好的，这对我有用：

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}
于 2017-04-30T10:35:30.653 回答