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

管理者

5年前

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);
});