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示例收集
Nov 05 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
关于js类的定义
2011/06/28 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python标准库sched模块使用指南
2017/07/06 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书