JavaScriptで要素のスクロール位置を取得するにはどうすればいいですか？
Webページをスクロールすると、要素の表示位置が変化します。JavaScriptを使って、要素の現在のスクロール位置を取得したり、設定したりすることができます。この記事では、要素のスクロール位置を取得・設定する方法について解説します。
要素のスクロール位置の取得
要素のスクロール位置の取得には、element.scrollLeft と element.scrollTop プロパティを使用します。
| プロパティ | 説明 |
|---|---|
element.scrollLeft |
要素の左端からどれだけスクロールされているかを取得します。 |
element.scrollTop |
要素の上端からどれだけスクロールされているかを取得します。 |
以下の例では、ボタンをクリックすると、指定した要素の現在のスクロール位置を取得して表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール位置の取得</title>
<style>
#container {
width: 300px;
height: 200px;
overflow: auto;
}
#content {
width: 600px;
height: 400px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<button id="getScrollPosition">スクロール位置を取得</button>
<div id="scrollPosition"></div>
<script>
const container = document.getElementById('container');
const scrollPosition = document.getElementById('scrollPosition');
const getScrollPositionButton = document.getElementById('getScrollPosition');
getScrollPositionButton.addEventListener('click', () => {
const scrollLeft = container.scrollLeft;
const scrollTop = container.scrollTop;
scrollPosition.textContent = `scrollLeft: ${scrollLeft}, scrollTop: ${scrollTop}`;
});
</script>
</body>
</html>
上記コードでは、#container 要素はスクロール可能な要素で、 #content 要素はその中身です。ボタンをクリックすると、#container 要素の scrollLeft と scrollTop プロパティを取得し、それぞれ水平方向、垂直方向のスクロール量を表示します。
参考資料
関連QA
Q1: スクロール位置を取得できる要素は、どのような要素ですか？
A1: スクロールバーを持つ要素、つまり overflow プロパティの値が scroll, auto, overlay のいずれかである要素のスクロール位置を取得できます。
Q2: `window` オブジェクトのスクロール位置はどうやって取得できますか？
A2: `window` オブジェクトのスクロール位置を取得するには、`window.pageXOffset` (`window.scrollX` と同等) と `window.pageYOffset` (`window.scrollY` と同等) を使用します。
Q3: スクロール位置を取得して、何か処理を実行したいのですが、どのようにすれば良いですか？
A3: スクロールイベントリスナー ( `window.addEventListener('scroll', ...)` ) を使用して、スクロールが発生するたびに処理を実行できます。イベントリスナー内でスクロール位置を取得し、目的の処理を実行します。
その他の参考記事:jquery done