JavaScriptでスクロール位置を取得する方法【現役エンジニアが解説】
今回は、JavaScriptでスクロール位置を取得する方法について、水平方向と垂直方向の位置に分け、簡単に解説していきます。
水平方向の位置
水平方向の位置はWindowのpageXOffsetプロパティで取得できます。
WindowのpageXOffsetプロパティには左端のX座標がピクセル単位で入っています。
console.log(window.pageXOffset);
上記のコードのように、window.pageXOffsetを使って、水平方向のスクロール位置を取得可能です。
垂直方向の位置
垂直方向の位置に関してもWindowのpageYOffsetプロパティで取得可能です。
WindowのpageYOffsetプロパティにも同様に上端のY座標がピクセル単位で入っています。
console.log(window.pageYOffset);
上記のコードのように、window.pageYOffsetを使うことで、垂直方向のスクロール位置も取得することができます。
カーソルの位置
カーソルの位置は、MouseEventのpageXやpageYプロパティで取得することができます。
WindowのpageXOffsetやpageYOffsetとは異なり、MouseEventのpageXやpageYはマウスイベントの発火が必要です。
document.body.addEventListener("mousemove", function(event){ console.log(event.pageX); console.log(event.pageY); });
上記のコードのように、mousemoveイベントをはじめとするマウスイベントで、MouseEventのpageXやpageYプロパティを参照し、カーソルの位置を取得できます。