CSS3中-webkit-overflow-scrolling: touch 的使用方法详解

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

auto

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

touch

使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用。

需求是需要手动设置滚动高度的，js代码是

el.scrollTop = 500;

此时，我发现在IOS环境下，每次手动改变scrollTop后整个容器变成空白，但手指触摸一下内容就出来了，scrollTop是成功改变了的，只是内容绘制出错。（这里我个人判断是浏览器底层的问题，因为安卓不存在这问题）

我通过用延迟加载，延迟设置滚动，或者是手动改变容器中的内容来强制重绘，可惜都不起作用，最终找到问题出在-webkit-overflow-scrolling: touch，因为当我把值设置为auto时BUG不存在。

思路出来了，在手动设置scrollTop前，先关闭惯性滚动，待设置完成后重新开启即可。

贴上解决代码：

el.WebKitOverflowScrolling = 'auto';

el.scrollTop = 500;

el.WebKitOverflowScrolling = 'touch';

查了一下网上的资料，H5端代码就不再敷述了，看一下Native处理

-webkit-overflow-scrolling: touch 的流程如下：

实际上，Safari真的用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用

要实现这个效果很简单，只需要加一行css代码即可：