posts - 24,comments - 1,views - 40782

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

posted on   不肯融化的冰  阅读(19989)  评论(1编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示