vue(nuxt)でボタン要素の位置を取得してスクロールさせる【関数の違い!】

vue(nuxt)のスクロール実装の覚書です。

vue-scrollto、vue2-smooth-scroll

npm installするものとして、vue-scrollto、vue2-smooth-scrolがあります。nuxtの場合、vue-scrolltoはプラグインとして使う感じで、アンカーに対してでした。

わざわざインストールする？って考えてもっと他の方法を探しました。

scroll-behavior vs scrollIntoView vs window.scroll

cssのscroll-behavior、JavasScriptのscrollIntoView、そしてwindowsのwindow.scrollがあるようです。

CSS: scroll- behavior → Safari非対応。IE11は論外
JS: scrollIntoView → Edge, Safari非対応。IE11は論（

結論
window.scrollしかないじゃん！

— piyo@FF14 (@piyopiy80151704) March 8, 2021

個人的にもいくつかの記事をみて、window.scrollが無難かなという気がしました。

window.scroll()とwindow.scrollTo()の違い

そのwindow.scroll()にもいくつか用意されていました。まるで階層構造のようです。

window.scroll()とwindow.scrollTo()の違いはないようです。window.scrollBy()は相対です。

ボタンを押したときスクロールさせる(window.scrollYとwindow.pageYOffsetの違い)

これだと１番てっぺんから100移動です。

window.scrollTo(0, 100)

ボタンの位置から移動だと次のような感じですかね。

  methods: {
    scroll() {
      const scrollY = window.scrollY || window.pageYOffset
      window.scrollTo({
        top: scrollY + 100,
        behavior: 'smooth'
      })
    },
  },

window..scrollYは、Windowのプロパティで現在値を監視しているようです。window.pageYOffsetは.scrollYのエイリアスのようです。scrollYがIEが対応していないっぽいので、いれています。

window.pageYOffsetはwindow.scrollYのエイリアスだけど、IE11ではwindow.pageYOffsetしか動かない（無駄知識）https://t.co/3M9VfyxOvL

— maroKanatani@AWSとHaskell頑張る人 (@maroKanatani) December 11, 2020

アニメーションはbehavior: ‘smooth’の部分です。

vue(nuxt)でボタン要素の位置を取得してスクロール(getBoundingClientRect().top)

ただ、上の方法でもそれっぽくできますが、上記の方法は要素の位置を取得していません。

そこで次のコードです。html側にidでbutton1の指定は必要です。

  methods: {
    scroll() {
      const element = document.getElementById('button1')
      const position = element.getBoundingClientRect().top

      window.scrollTo({
        top: position + 100,
        behavior: 'smooth'
      })
    },

コードは簡単でしたが、いろいろと種類があって調べる時間がほとんどだったため、体系的に覚えられるようめもがきです。参考になれば幸いです。

TechWatch