2020/10/07

JavaScriptでスクロール位置を取得する方法【現役エンジニアが解説】

PROGRAM

今回は、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プロパティを参照し、カーソルの位置を取得できます。

• facebook
• Tweet
• Read Later