《CSS》-webkit-overflow-scrolling:touch
开发网站时,在IOS上的浏览器若是以电脑版模式预览时
会发现滚动到底部的时候会整个页面都会跟著滚动
这种情况常发生在于使用iframe或是高度固定时
解决方式是透过 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
-webkit-overflow-scrolling:touch;
overflow-y:scorll;
在找寻解决方式过程中发现StackoverFlow上有人提到上述方法有可能一样not working,这时候只要在后面加上 !important 即可
-webkit-overflow-scrolling 二个属素值:
auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。
关于可能产生的Bug部分,可参阅对岸相关讨论文章
其它参考资料:深入研究-webkit-overflow-scrolling:touch
查看原文 >>