javascriptの命令で画面をスクロールさせる
スクロールの設定について、試します。
以前の投稿(https://propansystem.net/blog/2022/04/26/post-7753/)では、スクロール位置を取得しましたが、
今回は、スクロールをjavascript側から設定する方法です。
スクロールを設定するメソッドは次のものがあります。
scrollTo()
scrollBy()
scrollToメソッドはスクロールの初期位置を設定します。
また、scrollByメソッドは、現在のスクロール位置から加算して、スクロール位置を設定します。
実際に次のようなサンプルを書いて試してみます。
<!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);
// スクロール位置を強制指定
scrollTo(100, 200);
// スクロールの現在位置から、座標を加算する(この場合は、500, 700の位置になる)
scrollBy(400, 500);
// スクロール位置(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>
上記のソースと、実際にブラウザでアクセスしてみるとわかりますが、
最初のscrollToメソッドで「横方向に100、縦方向に200」のスクロール位置を決定していますが、
次のscrollByメソッドで「横方向に400、縦方向に500」のスクロール位置を決定していので
結果的に「横方向に500、縦方向に700」のスクロール位置になっていることがわかります。
動的にスクロール位置を変更する
次に、スクロール位置を動的に変更してみます。
実際の開発では利用機会はほとんどありませんが、ここでは実験的な意味をこめてサンプルを書いてみます。
サンプルHTMLは次のように書きました。
<!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);
// 50ミリ秒ごとに、スクロール値を加算していく
setInterval(function() {scrollBy(10, 25)}, 50);
// スクロール位置(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>
画面にアクセスしてみると、50ミリ秒ごとに
scrollBy(10, 25)
を実行して、スクロール位置が変化することがわかります。
ただし、画面上にあるdivタグ
<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>
は、もともと幅、高さが5000pxのサイズを指定している為、スクロール位置がそれ以上になると、見た目の変化は止まります。
では、スクロールの加算が止まったあとは、setIntervalの命令はどうなるか、ログを入れて試してみます。
setInterval(function() {scrollBy(10, 25)}, 50);
を
let scroll_counter = 0;
setInterval(function() {
scroll_counter++;
console.log('scroll_counter -> ' + scroll_counter);
scrollBy(10, 25)
}, 50);
という形で書き換えて実行してみます。
<!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;
let scroll_counter = 0;
// スクロールされたらメソッド「output_log_scroll」を呼ぶ
window.addEventListener('scroll', output_log_scroll);
// 50ミリ秒ごとに、スクロール値を加算していく
setInterval(function() {
scroll_counter++;
console.log('scroll_counter -> ' + scroll_counter);
scrollBy(10, 25)
}, 50);
// スクロール位置(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>
実際に画面アクセスして開発者ツールでログを確認すると、スクロールの動きが止まってもscrollByの命令は実行され続けています。
サンプルとして実験的に書いたプログラムなので、実際の開発ではこのようなことはしませんが、スクロールメソッドとその挙動を確認する為に試してみました。