スクロール座標の取得
javascriptでの要素の位置を取得する方法を試してみます。
今回はスクロールバーの位置を取得してみます。
まず、要素の位置(座標)の取得の前に、座標の考え方として、
次の考えがあります。
横方向の X座標はウィンドウの左上を0とし、右方向に増える。
縦方向の Y座標はウィンドウの左上を0とし、下方向に増える。
また、javascriptではドキュメントを基に決定する方法と、
ウィンドウ(他のビューポート含む)を基に決定する方法があります。
css等ではビューポートを基準として座標を決定していますが、
javascriptではどちらの方法で取得するか、メソッドによって決まります。
上記を踏まえて、スクロールバーの座標位置を取得してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1" style="width: 5000px; height: 5000px;">
<div style="position:fixed; top:10px;">
<div>X座標：<span id="x1"></span></div>
<div>Y座標：<span id="y1"></span></div>
</div>
</div>
<script type="text/javascript">
// ウィンドウ取得
let window_test = window;
// スクロールされたらメソッド「output_log_scroll」を呼ぶ
window.addEventListener('scroll', output_log_scroll);
// スクロール位置(X座標、Y座標)を出力する
function output_log_scroll()
{
// x座標出力用の要素を取得
let x1 = document.getElementById("x1");
let y1 = document.getElementById("y1");
// 要素を更新する
x1.innerHTML = window_test.pageXOffset;
y1.innerHTML = window_test.pageYOffset;
console.log("window pageXOffset -> " + window_test.pageXOffset);
console.log("window pageYOffset -> " + window_test.pageYOffset);
}
</script>
</body>
</html>
上記のソースと、実際にブラウザでアクセスしてみるとわかりますが、
一つの大きなdiv要素を用意し、上下にスクロールを出しています。
また、自分自身のwindowオブジェクトを取得する為に、windowオブジェクトを定義しています。
そしてそこでwindowオブジェクトのプロパティ「pageXOffset」と「pageYOffset」を取得し、
画面とコンソールログに出力しています。
画面出力の為に各divタブにはcssを指定していますが、取得結果を表示する為に描画位置を固定しています。