-webkit-overflow-scrolling:touch介绍和碰到的坑

1.作用

       可控制元素在移动设备有滚动回弹效果，可惯性滚动

2.适应场景

      在ios移动端上，设置容器overflow-y:scroll;使容器内元素滚动时，滑动会很卡顿，使用-webkit-overflow-scrolling:touch;可以解决该问题。 

     原理：该属性开启了硬件加速

     缺点：耗内存

3.引发的bug（仅ios）

     3.1 在设置了该属性的滚动容器内手动设置scrollTop时容器会变空白，（内容绘制出错，应该是浏览器底层的问题）

     3.2 手动设置scrollTop,某些机型上的scrollTop值改变了，但是页面不滚动

     3.3 滑动时偶尔卡顿

4.解决方案

    3.1 & 3.2（规避问题）：在手动改变scrollTop前先将-webkit-overflow-scrolling属性设置为auto,scrollTop改变后再设置回touch

    3.1: 可先让页面延时100ms再滚动1px,空白可以恢复正常

    3.2：给容器的某个子元素高度加1px

    3.3：给容器设置position:static

 

转载于:https://www.cnblogs.com/luoyanan/p/11095643.html