-webkit-overflow-scrolling:touch介绍和碰到的坑
2024-10-12 11:09:19
1.作用
可控制元素在移动设备有滚动回弹效果,可惯性滚动
2.适应场景
在ios移动端上,设置容器overflow-y:scroll;使容器内元素滚动时,滑动会很卡顿,使用-webkit-overflow-scrolling:touch;可以解决该问题。
原理:该属性开启了硬件加速
缺点:耗内存
3.引发的bug(仅ios)
3.1 在设置了该属性的滚动容器内手动设置scrollTop时容器会变空白,(内容绘制出错,应该是浏览器底层的问题)
3.2 手动设置scrollTop,某些机型上的scrollTop值改变了,但是页面不滚动
3.3 滑动时偶尔卡顿
4.解决方案
3.1 & 3.2(规避问题):在手动改变scrollTop前先将-webkit-overflow-scrolling属性设置为auto,scrollTop改变后再设置回touch
3.1: 可先让页面延时100ms再滚动1px,空白可以恢复正常
3.2:给容器的某个子元素高度加1px
3.3:给容器设置position:static
最新文章
- reGeorg v1.0内网流量转发
- 在listener或者工具中使用spring容器中的bean实例
- klayge 4.2.0 编译vc9
- Webform——Repeater多表联合显示
- Android 连接 SQL Server (jtds方式)——下
- poj 3684 Physics Experiment(数学,物理)
- nodejs笔记2——请求路由
- What is “Mock You” :Raise,callback,verify [转载]
- GPRS优点介绍及GPRS上网相关知识(转)
- (转)Linux文件系统的实现
- 移动GIS未来的前景GIS解决方案应用
- 原生ajax写的上拉加载
- sql server 高可用故障转移(6)
- [leecode]---11.container with most water
- selenium 代理设置
- flash Air 在同一个目录下面创建txt,写入字
- 通过path绘制点击区域
- spring boot 整合案例
- vue实现分页
- perf 工具介绍2