JavaScript - スクロールの操作を検出する
JavaScriptでスクロールの操作を検出してスクロール量を取得する方法とコード例を作成しています。
HTMLには、スクロール量を表示する用の要素にid名「output」を指定ています。
<p id="output">0</p>
スクロールの操作をトリガーにしたイベントはaddEventListener()
で「scroll」を指定する事で作成可能です。
スクロール量は「pageYOffset」で取得する事ができます。
コード例ではブラウザウィンドウに対してのスクロールの検出、スクロール量を取得しています。
window.addEventListener('scroll', () => {
document.querySelector('#output').innerHTML = window.pageYOffset;
});
![JavaScript - スクロールの操作を検出する](/images/javascript/detect-scroll-operation/image-ja.png)