专栏首页前端杂货铺position:sticky的兼容性尝试

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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文本框的属性监测

    之前很简单的认为对input的value监测就用2个事件可以搞定兼容性,知道我看了司徒正美的这篇博客,还是感慨自己不够深入,接触的太少。   对于IE全系列,可...

    欲休
  • 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为。规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同...

    欲休
  • Global eval. What are the options?

    David Flanagan最近写了一个关于全局eval的简单表达式,可以用一行式子表示: var geval = this.execScript || ev...

    欲休
  • Tips-移动端滑动固顶效果(position: sticky)

    先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 pos...

    Bob.Chen
  • 一款全网音乐神器推荐给大家

    突然发现自己很久没有听音乐了,之前对纯音乐和泰勒歌曲喜欢入迷的我,由于工作忙的原因,都很少打开网易云音乐静静品味音乐带来的美感。

    我的小碗汤
  • 韩国SM上线腾讯音乐,音乐平台在细分领域的发力

    在节前2月1日,腾讯音乐宣布与韩国SM公司达成版权合作,韩国的大量头牌艺人诸如Super Junior、少女时代、EXO、Wonder Girls、TWICE、...

    罗超频道
  • 音乐产业发展报告

    ?   引言   文化产业是通往大国之路的重要软实力。而作为文化软实力的主要组成部分,音乐产业一直是我国发展比较薄弱的环节。本文首先从音乐产业链分析入手,...

    腾讯研究院
  • javascript当中eval用法

    1)eval 例 4.1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <...

    马克java社区
  • svg.js教程及使用手册详解(二)

    上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

    王金龙
  • 在 mono 下使用微软的 OWIN 认证中间件

    使用 Microsoft.Owin.Security 中间件作为 OWIN 应用的标准验证在 IIS 下面工作良好, 不过最近在将 WebAPI 应用迁移到 L...

    beginor

扫码关注云+社区

领取腾讯云代金券