JavaScriptでスクロールをするプログラムの書き方(旧式とモダンなやり方)

2021年2月24日JavaScript

JavaScriptでスクロールをするプログラムの書き方を旧式の方法とモダンなやり方の両方をまとめました。
モダンなやり方はまだブラウザサポートが完璧ではないので、状況に応じて使いこなせるといいでしょう。

JavaScriptでスクロールをするプログラムの書き方(旧式)

scrollTo()+Element.getBoundingClientRect() メソッド

scrollTo()を使う方法です。
スクロール先のleftとtopの値のところまで進めるというやり方です。
topはビューポートのtopという意味なので相対的です。



//スクロール元の定数
　const btnScrollTo = document.querySelector('.btn--scroll-to');
//スクロール先の定数
　const section1 = document.querySelector('#section--1');

//クリックイベントの設定
　btnScrollTo.addEventListener('click', function (e) {

//Get the coordinates(座標) of the EL
  const s1coords = section1.getBoundingClientRect();
  console.log(s1coords);// DOMRect {x: 0, y: 340, width: 1150, height: 1388, top: 329, …}

//scrollTo()を使う
  window.scrollTo({
    left: s1coords.left + window.pageXOffset,
    top: s1coords.top + window.pageYOffset,
    behavior: 'smooth',//behaviowプロパティでスムースに動くようにできる
  });

  // window.scrollTo(s1coords.left + window.pageXOffset, s1coords.top + window.pageYOffset);
　//　上の一行でもいいけど、スムース(smooth)が適用できない。

});

s1coordsでコンソールに出力されているDOMRectについて説明します。
Element.getBoundingClientRect()メソッドは、要素の寸法と、そのビューポートに対する位置を返します。
rectangleは長方形ですが、DOM rectangleの意味するところは、矩形の境界線のエッジ ( top , right , bottom , left )のことです。
飛び元にイベントを設定し、その中で飛び先の座標を取得、そのleft,topに移動するように設定します。

window.pageYOffsetを足す理由

このtopはビューポートという相対的な位置を基準にしています。そのため、途中からスクロールしようとするとうまくいかない場合があります。
そのためスクロールしているカレントスクロール地点を足す必要があります。縦の動き(Y軸)なので、重要なのは+ window.pageYOffsetを足すことですが、一貫性のためにX軸も足します。

JavaScriptでスクロールをするプログラムの書き方(モダンな方法)

scrollIntoView()メソッド



//スクロール元の定数
　const btnScrollTo = document.querySelector('.btn--scroll-to');
//スクロール先の定数
　const section1 = document.querySelector('#section--1');

//クリックイベントの設定
　btnScrollTo.addEventListener('click', function (e) {

  //モダンなやり方（ブラウザサポート要チェック）
  section1.scrollIntoView({ behavior: 'smooth'});

});

scrollIntoView()メソッドは、ユーザーに見えるところまで、要素の親コンテナーをスクロールしてくれます。
この一行で、smoothも設定できるので明らかに便利です。
しかし、ブラウザサポートの問題はあるので、クライアントの希望に合わせて使い分けましょう。

JavaScript

Posted by devsakaso