快捷導(dǎo)航

JS解決position:sticky的兼容性問(wèn)題的方法

更新時(shí)間：2017年10月17日 16:50:36 作者：夜里的太陽(yáng)

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

在項(xiàng)目中有用到sticky的布局，可是由于兼容性問(wèn)題，在安卓端沒(méi)有很好的兼容，所以為了徹底解決這個(gè)問(wèn)題只能寫(xiě)一個(gè)組件來(lái)解決這個(gè)麻煩的問(wèn)題，這里為什么是組件而不是指令是因?yàn)?，是有原因的，下面?huì)講到。

position:sticky的兼容性以及作用

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

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

sticky組件實(shí)現(xiàn)

template部分

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

代碼解讀：這里我使用了組件來(lái)實(shí)現(xiàn)，而不用指令來(lái)實(shí)現(xiàn)的原因是：指令雖然是無(wú)侵入性的，更方便使用，可是有一個(gè)弊端就是當(dāng)修飾的節(jié)點(diǎn)fixed的時(shí)候會(huì)脫離文檔流，會(huì)改變滾動(dòng)的條的高度，如果僅僅是配合原生滾動(dòng)條來(lái)實(shí)現(xiàn)是沒(méi)問(wèn)題的（當(dāng)然這也會(huì)存在滾動(dòng)過(guò)快的問(wèn)題），可是由于是配合自定義滾動(dòng)所以，采取這種折中的方式來(lái)實(shí)現(xiàn)。最外層是一個(gè)sticky層，判斷瀏覽器是否支持sticky，不支持就使用relative來(lái)代替，這樣也就不會(huì)改變?yōu)g覽器高度的情況了，然后動(dòng)態(tài)改變stick-warp層的postion來(lái)實(shí)現(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一致，這樣過(guò)渡不會(huì)太生硬，高度和top都根據(jù)用戶對(duì)外層sticky的自定義來(lái)實(shí)現(xiàn)，這樣這部分簡(jiǎ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來(lái)判斷一下瀏覽器的支持情況，然后通過(guò)多自定義滾動(dòng)y-scroll事件的監(jiān)聽(tīng)，監(jiān)聽(tīng)top值的改變來(lái)實(shí)現(xiàn)sticky-warp層的fixed和absolute的轉(zhuǎn)換。大概原理的思路及實(shí)現(xiàn)過(guò)程就是上面這樣，對(duì)于自定義的滾動(dòng)的github地址：https://github.com/yejiaming/scroll，sticky組件以及原生滾動(dòng)下的指令參考的實(shí)現(xiàn)的github地址如下：https://github.com/yejiaming/sticky

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

您可能感興趣的文章: