JS解决position:sticky的兼容性问题的方法


Posted in Javascript onOctober 17, 2017

在项目中有用到sticky的布局,可是由于兼容性问题,在安卓端没有很好的兼容,所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题,这里为什么是组件而不是指令是因为,是有原因的,下面会讲到。

position:sticky的兼容性以及作用

Caniuse上显示sticky的兼容性如下:

JS解决position:sticky的兼容性问题的方法

Sticky的作用相当于relative和fixed的结合体,当修饰的目标节点再屏幕中时表现为relative,当要超出的时候是fixed的形式展现,因为这个特性,我们就可以来实现一个sticky的模拟效果。

sticky组件实现

template部分

<template>
  <div class="sticky" :style="getPosition">
    <div class="sticky-warp">
      <slot></slot>
    </div>
  </div>
</template>

代码解读:这里我使用了组件来实现,而不用指令来实现的原因是:指令虽然是无侵入性的,更方便使用,可是有一个弊端就是当修饰的节点fixed的时候会脱离文档流,会改变滚动的条的高度,如果仅仅是配合原生滚动条来实现是没问题的(当然这也会存在滚动过快的问题),可是由于是配合自定义滚动所以,采取这种折中的方式来实现。最外层是一个sticky层,判断浏览器是否支持sticky,不支持就使用relative来代替,这样也就不会改变浏览器高度的情况了,然后动态改变stick-warp层的postion来实现效果。

css部分

<style scoped lang="less" rel="stylesheet/less">
  .sticky {
    width: 100%;
    .sticky-warp {
      width: 100%;
      background: inherit;
      will-change: change;
      height: inherit;
      top: inherit;
    }
  }
</style>

代码解读:这里的warp层的背景色设置和sticky一致,这样过渡不会太生硬,高度和top都根据用户对外层sticky的自定义来实现,这样这部分简单用css就可以完成了。

JS部分

<script type="text/babel">
  export default {
    data () {
      return {}
    },
    computed: {
      getPosition(){
        var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
        return 'position:' + position;
      }
    },
    props: {},
    beforeMount () {
    },
    mounted(){
      this.init();
    },
    deactivated(){
      if(this.cssSupport('position', 'sticky')) {
        return;
      }
      /*复位*/
      var elWarp = this.$el.querySelector('.sticky-warp');
      elWarp.position = 'absolute';
    },
    methods: {
      init(){
        if (this.cssSupport('position', 'sticky')) {
          return;
        }
        var el = this.$el, target = this.$el.parentNode,
            elWarp = this.$el.querySelector('.sticky-warp'),
            top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);
        this.addScrollListen(target, (event)=> {
          if (el.getBoundingClientRect().top <= top) {
            elWarp.style.position = 'fixed';
          }
          if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
            elWarp.style.position = 'absolute';
          }
        })
      },
      cssSupport: function (attr, value) {
        var element = document.createElement('div');
        if (attr in element.style) {
          element.style[attr] = value;
          return element.style[attr] === value;
        } else {
          return false;
        }
      },
      getNumberValue(pxValue){
        var value = String(pxValue).match(/^\-?\+?[0-9]+/g);
        return value ? Number(value) : undefined;
      },
      addScrollListen(target, cb){
        target.addEventListener('y-scroll', (event)=> {
          cb && cb(event);
        });
      }
    },
  }

 
</script>

代码解读:这里面主要先用cssSupport来判断一下浏览器的支持情况,然后通过多自定义滚动y-scroll事件的监听,监听top值的改变来实现sticky-warp层的fixed和absolute的转换。大概原理的思路及实现过程就是上面这样,对于自定义的滚动的github地址:https://github.com/yejiaming/scroll,sticky组件以及原生滚动下的指令参考的实现的github地址如下:https://github.com/yejiaming/sticky

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 选取方法都有哪些
May 18 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
JS实现div模块的截图并下载功能
Oct 17 #Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 #Javascript
AngularJS 控制器 controller的详解
Oct 17 #Javascript
VUE前端cookie简单操作
Oct 17 #Javascript
javascript 判断用户有没有操作页面
Oct 17 #Javascript
vue-router 路由基础的详解
Oct 17 #Javascript
如何抽象一个Vue公共组件
Oct 17 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
jQuery中Dom的基本操作小结
2014/01/23 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
javaScript语法总结
2016/11/25 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
python中的函数用法入门教程
2014/09/02 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
keras之权重初始化方式
2020/05/21 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
小学生打架检讨书
2014/01/26 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
校园活动策划方案
2014/06/13 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python