总结CSS3中-webkit-overflow-scrolling使用问题解决方法

 浆糊之家   2018-06-26 20:50   3,311 views 热度值

要做有很多列表的页面,然后并不适用iscroll等滚动的插件,做完也没按之后,滑动列表卡顿卡顿的,遭啦,这样子的滑动太让人不舒服。

网上搜索了一下,发现了一个新属性,-webkit-overflow-scroll,专治“该病”。我手快的设置body设置上-webkit-overflow-scrolling: touch,哟西,页面滚动起来舒服多了,不再是是卡顿卡顿的(测试机iPhone6s)。上MDN搜索了一下该属性的兼容性,有点失望,目前只是iOS系统得支持了。不过也不影响,至少加上这个体验可以让iOS用户体验更棒一点。

取值

auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止

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

 

推荐写法

下面是兼容安卓和iOS的写法

适用范围

我一般在写页面什么时候用到这个属性的情况呢。

1、一般就是页面要滚动,然后不使用一些滚动的插件

2、弹窗内容过长,此时需要滚动显示,那么此时加上这个属性,滚动起来体验就大大提升了。

 

使用过程遇到bug问题

1、我在非body元素,添加这个属性,竟然没有效果。如果添加上overflow-y: scroll,就可以优雅的滚动起来了。

2、当一个元素设置过position: absolute|relative,后再增加-webkit-overflow-scrolling: touch;属性后,会发现,滑动几次后就滚动区域会卡住,不能在滑动,这时给元素增加个z-index值就可以了。

解决方法:

给元素增加个z-index值

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

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

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

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

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

贴上解决代码:

 

 

 

 发表评论


表情