详解overflow-scrolling解决滚动卡顿问题
2020-11-23 04:07
1276 查看
前言
如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。
解决方法
以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;,是因为这行代码启用了硬件加速特性,所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。
-webkit-overflow-scrolling: auto | touch;
auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止
touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
兼容写法
over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */
ps:
1、如果添加了此属性但是不起作用,再添加overflow-y: scroll,就可以了。
2、当一个元素设置过position: absolute|relative,后再增加-webkit-overflow-scrolling: touch;属性后,会发现,滑动几次后就滚动区域会卡住,不能在滑动,这时给元素增加个z-index值就可以了。
参考文献:https://www.jianshu.com/p/1f4693d0ad2d
https://www.geek-share.com/detail/2715008120.html
到此这篇关于详解overflow-scrolling解决滚动卡顿问题的文章就介绍到这了,更多相关overflow-scrolling滚动卡顿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 使用doublebuffered来解决VB.net中datagridview数据显示和滚动慢和卡顿的问题
- ios滚动不流畅问题之 -webkit-overflow-scrolling:touch
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 手机端局部滚动问题 overflow-y:auto|scroll无效的解决办法
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 无需SherlockActionbar的SlidingMenu使用详解(一)——通过SlidingMenu设置容器并解决滑动卡顿的问题
- 详解iOS 滚动视图的复用问题解决方案
- 用JS有效解决移动web浏览器中HTML元素的overflow:scroll滚动属性失效问题
- 手机端局部滚动问题 overflow-y:auto|scroll无效,使用iscroll解决
- 解决ios手机端div是overflow: auto;引起的内容滑动卡顿问题
- 实现滚动条丝滑滚动,流畅不卡顿,有回弹效果。-webkit-overflow-scrolling
- vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
- 解决页面使用overflow: scroll在iOS上滑动卡顿的问题
- cocos ScrollView(滚动容器)加载大量item导致的卡顿问题解决方案
- 关于ListView的Adapter,解决ListView滚动后内容重复的问题
- JTable放到JScrollPane里,可以上下滚动,但是不能左右滚动问题解决
- Service onStartCommand各种返回详解,解决问题:只调用onCreate不调用onStartCommand
- position:absolute与overflow:hidden,解决子元素设置position:absolute后父元素 overflow:hidden无效的问题
- TCP socket通信解决连包问题详解