在IOS上使用overflow-x:scroll进行加速/减速的平滑原生样式滑动滚动; 使用CSS的可滚动div

Question

使用可滚动的div

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

Android设备上的DEMO刷卡滚动平滑甚至加速和减速.

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

如何使iPhone像滚动浏览器一样对待具有平滑加速/减速原生样式滚动的Android浏览器？

Answer 1

您可以overflow使用以下专有的CSS属性在HTML元素上进行本机样式的滚动:

-webkit-overflow-scrolling: touch;

不过,它有一些警告.根据元素内部的内容,渲染可能会稍微破坏,因此您应该测试它并查看它是否适合您的特定需求.当你指定时,我也不确定它是否正常工作overflow-y: hidden.如果没有,你应该能够通过玩不同的值来实现它overflow-x,overflow-y并且overflow(auto似乎不起作用).

如果需要,您可以假冒overflow-y: hidden您div创建第二个嵌套div的内容和设置就可以了该属性.但我希望没有必要.