今回はVue.jsで慣性スクロールというものを作ってみたいと思います。最近のウェブサイトでもしばしば見かけることのある、ぬるぬる動くスクロールで通常のスクロールにイージングがついたような動きをするものです。調べてみるといろんなプラグインがあるようですが、簡単なものであれば自前で用意できるのではと思い、Vue.jsで実際に試してみました。   一応、慣性スクロールということで、通常のスクロールにイージング効果を追加したような動きにはなるのですが、実際にはスクロール自体にイージングをつけるのでは無く、スクロール量に合わせて要素を上下方向に移動させ、その動きに対してイージングをつけるような形となります。それでは早速コードを見ていきたいと思います。   まずはHTMLからです、今回はPugで作成していますがHTMLで書くときも構成は同じです。大きく分けると2つの要素から構成されています。スクロールのイージング効果が適用される範囲のラップ要素と、実際にスクロールに合わせて移動するコンテナ要素になります。今回はVue.jsで要素の高さを取得するなど、これらの要素をDOMで扱う必要があるのでref属性を指定しておきます。 【Pug】※一部抜粋

div#app
  div(class="wrap" ref="scrollWrap")
    div(class="container" ref="scrollContainer") 
      section
        span セクション1
      section
        span セクション2
      section
        span セクション3

  続いてCSSです、こちらもSassで記述していますが特別変わっているところはありません。スタイルの指定で大事なところですが、コンテナ要素に対して「position: fixed;」を指定してあげることです。こうすることで親要素の範囲内で移動ができるのでスクロールに合わせた自然な動きを再現できるようになります。そのため、コンテナ要素の親要素であるラップ要素には「position: relative;」を指定してあげておくと良いですね。実際にはスクロールに合わせてコンテナ要素を、transformとtransitionプロパティで操作していく形になりますが、値が動的なこともありCSSではなくJavaScript側で設定していきます。 【Sass（SASS）】※一部抜粋

.wrap
  position: relative
  overflow: auto
  .container 
    position: fixed
    width: 100%

  最後にJavaScriptを見ていきます。今回はVue.jsを使うのでインスタンスを作成していますが、VueCLIやNuxt.jsを使う場合でもオプションなどは同じ考え方になります。作成する仕様に合わせて適宜調整します。まずはdataオプションに現在のスクロール量を入るように変数を定義します。この値がコンテナ要素を動かす時の値になります。 【JavaScript（Vue）】

const vueModel = new Vue({
  el: '#app',
  data: {
    currentScroll: 0
  },
  mounted() {
    this.init();
    this.scrollEasing();
  },
  methods: {
    init() {
      const events = ['load', 'resize'];
      events.forEach(event => {
        window.addEventListener(event, () => {
          this.$refs.scrollWrap.style.height = `${this.$refs.scrollContainer.clientHeight}px`;
        });
      });
    },
    scrollEasing() {
      window.addEventListener('scroll', () => {
        this.currentScroll = window.scrollY;
        this.$refs.scrollContainer.setAttribute(
          'style',
          `transition: transform 2.4s ease-out 0s;
           transform: translate(0, -${this.currentScroll}px);`
        );
      }); 
    }
  }
});

  そして、methodsオプションでは、ラップ要素の高さの設定とスクロールのイージング効果をつける処理を作成しておきます。ラップ要素の高さを設定することで、その中に含まれるコンテナ要素がスクロールできるようになります。コンテナ要素はスクロールイベントでスクロール量に応じて下方向に移動させることで、擬似的にスクロールされているように見せることができます。この移動に対してtransitionとイージングを適用することであたかもスクロールでイージング効果が適用されているようになるということですね。   最後にはmountedで実行させます。DOM要素から情報を取得したりしていることもありDOM要素が描画されてからでないとDOMを取得できないので、エラーが出てしまいますので注意です。このような形で今回のサンプルはこちらになります。実際にスクロールしてみると違いがよくわかるかと思います。  

See the Pen scroll_ easing_on_vue by designsupply (@designsupply) on CodePen.

 

---

  今回紹介しました、スクロールにつけるイージング効果ですが、スクロールに合わせたアニメーションを使っている場合に相性がいいのでは無いでしょうか。またパララックスなどの背景が動くものと組み合わせてみるのも面白そうですね！