在游覽各類官網(wǎng)時(shí)，經(jīng)常會(huì)看到他們的官網(wǎng)在屏幕上下滾動(dòng)時(shí)有一個(gè)緩沖效果，效果就是下圖這樣（圖片來源：パティスリー GIN NO MORI，吐槽一下日本的平面設(shè)計(jì)水平是真的高）

パティスリー GIN NO MORI

使用

• 恰好最近的工作中需要用到這個(gè)，我就寫了一個(gè)，需要的話可以直接npm下載使用：

npm install vue-scroll-buffer

• 然后再app.vue中引入vue-scroll-buffer，并調(diào)用。

<script>
import BufferAnimation from 'vue-scroll-buffer'
export default {
  mounted() {
    BufferAnimation(10)
  }
};
</script>

配置項(xiàng)

• 調(diào)用函數(shù)時(shí)傳參來改變緩沖動(dòng)畫的持續(xù)時(shí)長(zhǎng)，可選值為1~20，值越小的話，動(dòng)畫時(shí)間越長(zhǎng)，默認(rèn)值為10。

BufferAnimation(10)

預(yù)覽

• 效果對(duì)比圖如下，左邊是游覽器的默認(rèn)滾動(dòng)效果，右邊是添加了動(dòng)畫的效果。

  
  
  預(yù)覽圖

源碼如下

;(function(root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.NProgress = factory();
  }

})(this, function() {
  var BufferAnimation = function(wrapperSpeed) {
    let o = wrapperSpeed;
    o < 1 ? (o = 1) : o > 20 ? (o = 20) : (o = o);
    var setting = {
        wrapper: "#app",
        wrapperSpeed: o / 100
      },
      i =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
    window.requestAnimationFrame = i;
    var s = window.cancelAnimationFrame || window.mozCancelAnimationFrame,
      t = function() {
        this.wrapper = "";
        this.windowHeight = 0;
        this.wapperOffset = 0;
      };

    t.prototype = {
      isAnimate: false,
      isResize: false,
      scrollId: "",
      resizeId: "",
      init: function(t) {
        this.wrapper = "";
        this.windowHeight = 0;
        this.wapperOffset = 0;
        this.wrapper = document.querySelector(setting.wrapper);
        console.log(this.wrapper)
        document.body.style.height = this.wrapper.clientHeight + "px";
        this.windowHeight = window.clientHeight;
        this.attachEvent();
        this.wrapperInit();
        this.animate();
        this.resize();
      },
      wrapperInit: function() {
        this.wrapper.style.width = "100%";
        this.wrapper.style.position = "fixed";
      },
      scroll: function() {
        (this.scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop),
          this.wrapperUpdate(this.scrollTop);
      },
      animate: function() {
        this.scroll();
        this.scrollId = i(this.animate.bind(this));
      },
      wrapperUpdate: function() {
        this.wapperOffset +=
          (this.scrollTop - this.wapperOffset) * setting.wrapperSpeed;
        this.wrapper.style.transform =
          "translate3d(0," +
          Math.round(100 * -this.wapperOffset) / 100 +
          "px ,0)";
      },
      resize: function() {
        var t = this;
        t.windowHeight =
          window.innerHeight || document.documentElement.clientHeight || 0;
        t.resizeId = i(t.resize.bind(t));
      },
      attachEvent: function() {
        var t = this;
        window.addEventListener("resize", function() {
          t.isResize ||
            (s(t.resizeId),
            s(t.scrollId),
            (t.isResize = !0),
            setTimeout(function() {
              t.isResize = false;
              t.resizeId = i(t.resize.bind(t));
              t.scrollId = i(t.animate.bind(t));
            }, 200));
        });
      }
    };
    new t();
    t.prototype.init();
  }
  return BufferAnimation
})