JavaScript でスクロールバーの位置を取得する
このチュートリアルでは、JavaScript でスクロールバーの位置を取得する方法について説明し、次のことについて説明します。
- スクロールバーとスクロールバーの位置とは何ですか
windowオブジェクトを使用してスクロールバーの位置を取得する方法- 要素内のスクロールバーの位置を取得する方法
スクロールバーとスクロールバーの位置とは
スクロールバーは通常、ユーザーがスクロールできるブラウザーウィンドウの最下部または右端にあり、ユーザーの表示領域を返します。多くのユーザーは、より多くのコンテンツを表示するためにほぼすべての Web ページを上下にスクロールする必要があるため、毎日スクロールバーを使用します。
スクロールバーは、ウィンドウの表示領域の水平または垂直の位置であり、ユーザーが左または上からどれだけスクロールしたかを意味します。デフォルトでは、スクロール位置は左から 0px、上から 0px です。
JavaScript の window オブジェクトを使用してスクロールバーの位置を取得する
window オブジェクトを使用して、ウィンドウ上のスクロールバーの位置を取得できます。window オブジェクトは他の JavaScript オブジェクトと同様であるため、scroll イベントをリッスンする EventListener を追加できます。
window.addEventListener('scroll', (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
このコンテキストでの this は window オブジェクトと呼ばれます。scrollY は、ウィンドウ表示領域が上からスクロールされたピクセル数を示す window のプロパティです。scrollX は、ユーザーが左からどれだけスクロールしたかを示す window オブジェクトのプロパティです。
JavaScript で要素内のスクロールバーの位置を取得する
ウィンドウ全体ではなく、要素を基準にしてスクロール位置を取得する必要がある特定のシナリオがあります。これを行う例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#ContentContainer {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 500px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="ContentContainer" onscroll="getScrollPoistion()">
<div id="content">Content to Scroll</div>
</div>
<script>
function getScrollPoistion() {
var ContainerElement = document.getElementById("ContentContainer");
var x = ContainerElement.scrollLeft;
var y = ContainerElement.scrollTop;
console.log(x); // scroll position from Left
console.log(y); // scroll position from top
}
</script>
</body>
</html>
上記のコードセグメントでは、ContentContainer の id を持つ要素は onscroll のプロパティを持っています。ユーザーが要素内をスクロールするたびに、getScrollPosition 関数が実行されます。
getScrollPosition が行うことは、コンテンツ要素のコンテナを取得し、左からスクロールされた位置を取得してから、上からスクロールされた位置を取得することです。