サイトアイコン 上尾市のWEBプログラマーによるブログ

【JavaScript】スクロール量(位置・座標)の取得方法

JavaScript

Windowのスクロール量

window.pageYOffsetで取得することができる。
ただし、IE8以前は非対応のためdocument.documentElement.scrollTopとする必要がある。
https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset

よって、(window.pageYOffset || document.documentElement.scrollTop)と書くことで、クロスブラウザ対応することができる。

window.addEventListener("scroll", (event) => {
  console.log(window.pageYOffset || document.documentElement.scrollTop);
}); 

要素のスクロール量

要素.scrollTopで取得することができる。
ただし、IE8以前は非対応なので取得することができない。

document.getElementById('hoge').addEventListener("scroll", (event) => {
  console.log(event.target.scrollTop);
}); 
モバイルバージョンを終了