-webkit-overflow-scrolling: touch 手动改变 scrollTop 导致的 bug 及解决方案

关于-webkit-overflow-scrolling,看看相关API,主要用来设置在IOS浏览器的容器内滚动是否开启惯性和回弹的。

所以,一般情况都是设置其值为touch

-webkit-overflow-scrolling: touch

但是,这一次遇到一个BUG。

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

el.scrollTop = 500;

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

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

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

贴上解决代码:

el.WebKitOverflowScrolling = 'auto';
el.scrollTop = 500;
el.WebKitOverflowScrolling = 'touch';
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏