【JavaScript】スクロール位置を取得・設定する

本記事の目次

JavaScriptでスクロール位置を取得する

windowオブジェクトのscrollYプロパティを取得することで、取得時点での縦方向のスクロール位置を取得することができます。

// スクロールされた時、現在の縦方向のスクロール位置をコンソールに出力する
window.addEventListener('scroll', () => {
  const y = window.scrollY;
  console.log(y);
});

windowオブジェクトにaddEventListenerでscrollイベントを追加することで、ブラウザ上でスクロールされた時に処理を実行することができるようになります。

また、windowオブジェクトのonscrollプロパティに処理を代入することでも実装できます。

window.onscroll = () => {
  const y = window.scrollY;
  console.log(y);
}

この場合、先に付与されている処理がある場合は、その処理が上書きされるので注意しましょう。

横方向のスクロール位置を取得するためには、windowオブジェクトのscrollXプロパティを取得します。

縦方向のスクロール位置をscrollYプロパティを取得する場合と同様の操作を行います。

// スクロールされた時、現在の横方向のスクロール位置をコンソールに出力する
window.addEventListener('scroll', () => {
  const x = window.scrollX;
  console.log(x);
});

addEventListenerではなく、onscrollプロパティを使用する場合↓

window.onscroll = () => {
  const x = window.scrollX;
  console.log(x);
}

ここまでご紹介してきた scrollYプロパティや scrollXプロパティは、IE8以下に対応していないためIE8以下に対応させたい場合別の方法を利用する必要があります。

// IE7 ~ IE8 に対応させる
const x = document.documentElement.scrollLeft; // 横方向
const y = document.documentElement.scrollTop; // 縦方向

// IE6 以下に対応させる」
const x = document.body.scrollLeft; // 横方向
const y = document.body.scrollTop; // 縦方向

scrollTo()メソッドでは、絶対位置を指定して画面をスクロールさせます。

scrollTo(0, 1000);

第一引数に横方向のスクロール位置を、第二引数に縦方向のスクロール位置を指定します。

↑のサンプルコードの場合、ページの先頭から縦1000pxの場所までスクロールします。

JavaScriptで画面をスクロールさせる方法にはscrollBy()メソッドというのも存在します。

scrollTo()メソッドで絶対位置を指定したのに対して、scrollBy()メソッドでは、現在の地点からの相対位置を指定します。

scrollBy(0, 1000);

引数には、scrollTo()メソッドと同様に第一引数に横方向のスクロール量を、第二引数に縦方向のスクロール量を指定します。

また、上へスクロールさせたい時には、第二引数にマイナスの値を指定します。

scrollBy(0, -1000);

scrollTo({
  top: 1000,
  left: 0,
  behavior: 'smooth'
});

behavior: ‘smooth’ と記述することで、アニメーション付きでスクロールさせることができます。

top、leftはそれぞれ縦横スクロールの絶対位置です。

$("html,body").animate({scrollTop:1000},500);

上記例では、ページ先頭から縦1000pxの時点に0.5sかけてスクロールします。

純粋なJavaScriptではないですが、jQueryを利用することで簡単にスクロールにアニメーションを付けることができます。