position:sticky的兼容性尝试
开篇
笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉!
在忙碌完公司的发布系统之后,逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position:sticky属性的兼容。
问题
目前前端的h5有个需求,就是“当页面上的若干个标题被拖动到视口的顶部时,则显示一个被定位到视口的顶部的tab标签,可对这个tab标签进行点击导航,并在某个特殊的情况下隐藏”。最简单粗暴的做法就是针对document.body做scroll侦听,在函数中遍历所有的标题并计算出getBoundingClientRect计算出距离适口的顶部距离,决定是否显示tab栏或者活动标签,但是在这里可能会出现一些性能问题:
+ 在浏览器端和安卓设备上,scroll事件连续触发,如果在侦听函数中做过于复杂的判断,肯定会暂时阻塞ui(主)线程的渲染,造成卡顿
+ 每次在侦听函数中都执行一次getBoundingClientRect函数,都会导致ui线程刷新渲染队列,进行一次layout和repaint,有可能造成卡顿
+ 在ios设备中,scroll事件在上下滑动的过程中js不会连续执行,只在滑动结束的时刻执行一次,并且不支持左右滑动事件的触发
针对上述问题进行修复,其实并不困难:
+ 针对scroll做throttle节流,避免每次滑动都执行,可以设置时间间隔,如50ms
+ 在侦听函数中计算元素的layout属性,可用setTimeout在定时器队列尾插入任务,异步渲染
+ ios设备实现了一个属性-position:sticky,可以不用js来完成粘性布局
深入
针对sticky布局的兼容性,我们很容易兼容大多数移动端浏览器。在pc和安卓的chrome中并未实现该属性,而在pc和iOS 的safari中全部兼容该属性,因此针对iOS可以单独使用sticky完成兼容。
sticky布局有着几个条件:
+ 元素并不会脱离文档流,当元素被粘在视口的顶部时,原来在文档流中的位置仍然占据,这点类似relative定位
+ 元素相对于其最近可滚动的祖先元素“粘性定位”,如果其祖先元素都不能滚动,则相对于适口定位
+ 元素最近的祖先元素overflow设置为非默认值visible时,则元素相对于该祖先元素进行sticky定位。若最近的祖先元素设置为overflow:hidden,则元素不会sticky定位
因此解决ios的代码可以这样:
// sticky类为粘性布局的样式设置
if (gtIOS6) {
// 大于等于iOS6版本使用sticky
$tab.addClass('sticky');
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)