IOS webkit-overflow-scrolling: touch 踩坑笔记

Posted 龙鸿轩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IOS webkit-overflow-scrolling: touch 踩坑笔记相关的知识,希望对你有一定的参考价值。

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开,滚动会立即停止 */

overflow:auto 或scroll在ios下无效,需要用-webkit-overflow-scrolling属性
然而 “该特性是非标准的,请尽量不要在生产环境中使用它!”

橡皮筋事件会导致卡顿,要几秒之后才能恢复正常。

解决方案是
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
-webkit-transform: translate3d(0,0,0); /*HELPS THE ABOVE WORK IN IOS8*/
-webkit-perspective: 1000; /*HELPS THE ABOVE WORK IN IOS8*/






以上是关于IOS webkit-overflow-scrolling: touch 踩坑笔记的主要内容,如果未能解决你的问题,请参考以下文章

-webkit-overflow-scrolling:在 chrome 和 ios 上无法识别触摸

ios上-webkit-overflow-scrolling与position的bug

`-webkit-overflow-scrolling: touch` 在 iOS7 中因最初的屏幕外元素而损坏

iOS 9 `-webkit-overflow-scrolling:touch` 和 `overflow: scroll` 破坏了滚动功能

iOS:有啥方法可以让 -webkit-overflow-scrolling 和 ::-webkit-scrollbar 一起工作?

-webkit-overflow-scrolling