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代码便可：