-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代码即可: