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があるようです。

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

スポンサーリンク

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

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

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

スポンサーリンク

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

これだと1番てっぺんから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が対応していないっぽいので、いれています。

アニメーションは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'
      })
    },

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

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました