JS解決position:sticky的兼容性問題的方法

更新時間：2017年10月17日 16:50:36 作者：夜里的太陽

本篇文章主要介紹了JS解決position:sticky的兼容性問題的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在項目中有用到sticky的布局，可是由于兼容性問題，在安卓端沒有很好的兼容，所以為了徹底解決這個問題只能寫一個組件來解決這個麻煩的問題，這里為什么是組件而不是指令是因為，是有原因的，下面會講到。

position:sticky的兼容性以及作用

Caniuse上顯示sticky的兼容性如下：

Sticky的作用相當(dāng)于relative和fixed的結(jié)合體，當(dāng)修飾的目標(biāo)節(jié)點再屏幕中時表現(xiàn)為relative，當(dāng)要超出的時候是fixed的形式展現(xiàn)，因為這個特性，我們就可以來實現(xiàn)一個sticky的模擬效果。

sticky組件實現(xiàn)

template部分

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

代碼解讀：這里我使用了組件來實現(xiàn)，而不用指令來實現(xiàn)的原因是：指令雖然是無侵入性的，更方便使用，可是有一個弊端就是當(dāng)修飾的節(jié)點fixed的時候會脫離文檔流，會改變滾動的條的高度，如果僅僅是配合原生滾動條來實現(xiàn)是沒問題的（當(dāng)然這也會存在滾動過快的問題），可是由于是配合自定義滾動所以，采取這種折中的方式來實現(xiàn)。最外層是一個sticky層，判斷瀏覽器是否支持sticky，不支持就使用relative來代替，這樣也就不會改變?yōu)g覽器高度的情況了，然后動態(tài)改變stick-warp層的postion來實現(xiàn)效果。

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層的背景色設(shè)置和sticky一致，這樣過渡不會太生硬，高度和top都根據(jù)用戶對外層sticky的自定義來實現(xiàn)，這樣這部分簡單用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;
      }
      /*復(fù)位*/
      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事件的監(jiān)聽，監(jiān)聽top值的改變來實現(xiàn)sticky-warp層的fixed和absolute的轉(zhuǎn)換。大概原理的思路及實現(xiàn)過程就是上面這樣，對于自定義的滾動的github地址：https://github.com/yejiaming/scroll，sticky組件以及原生滾動下的指令參考的實現(xiàn)的github地址如下：https://github.com/yejiaming/sticky

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: