开发网站时,在IOS上的浏览器若是以电脑版模式预览时

会发现滚动到底部的时候会整个页面都会跟著滚动

这种情况常发生在于使用iframe或是高度固定时

解决方式是透过 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

-webkit-overflow-scrolling:touch;

overflow-y:scorll;

在找寻解决方式过程中发现StackoverFlow上有人提到上述方法有可能一样not working,这时候只要在后面加上 !important 即可

 

MDN上的定义

-webkit-overflow-scrolling 二个属素值:

auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

 

关于可能产生的Bug部分,可参阅对岸相关讨论文章

 

其它参考资料:深入研究-webkit-overflow-scrolling:touch

查看原文 >>
相关文章