JavaScript で自動スクロールを実装する
JavaScript は、より優れた UI エクスペリエンスを保証し、さまざまなメソッドを備えています。ページを自動的にスクロールするように設定するという問題では、組み合わせてクールな UI を作成できるいくつかの機能を確認します。
ここでの基本的なタスクは、ページが読み込まれるたびに Web ページを自動的にスクロールすることです。また、スクロール中にEnterを押すと、ページが停止します。
そして、もう一度Enterを押すと、ページがスクロールを開始します。コードフェンスにジャンプして、コードフローを理解してみましょう。
JavaScript で自動スクロールするには、scrollBy() と setInterval() を使用する
デモンストレーションでは、ビューポートよりも大きな UI を使用します。メインタスクは JavaScript で実装されています。
2つの関数（startScroll と stopScroll）を初期化しました。startScroll() 関数は、Enterが押されるたびにスクロールを有効にします。
また、Enterの押下が検出されると、stopScroll() が有効になります。
startScroll 関数には、setInterval() および scrollBy() メソッドがあります。両方のメソッドをマージします。
メソッド scrollBy() によって、期待するスクロールの種類を設定します。このコードでは、水平スクロールを 0 に設定し、垂直スクロールを 2 単位に設定します。
これは静的に下にスクロールする方法であり、スクロールが発生していることを確認することはできません。ページがジャンプして、スクロールした部分の後に表示されます。
したがって、時間間隔を 10 ミリ秒に設定します。したがって、ページは視覚的にダウンします。stopScroll() 関数では、現在のページ位置のインスタンスをチェックすることにより、間隔をクリアします。
また、Enterで再生が一時停止するように条件付きステートメントを作成します。コードを確認してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="one" style="height: 250px; background:pink">
<br>
  On page load the scrolling of the page will be enabled. <br>
  When pressed enter, the scroll will be halt. <br>
  And when pressed again it will scroll. <br>
  When the scroll meets the end of page, the scrolling function will stop. <br>
  And you can manually scroll up. An when needed press enter again to scroll to down. <br>
</div>
<div id="one" style="height: 250px; background:purple"></div>
<div id="one" style="height: 250px; background:cyan"></div>
<div id="one" style="height: 250px; background:lightgreen"></div>
</body>
</html>
let scrollerID;
let paused = true;
let interval = 10;
function startScroll() {
let id = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// end of page?
stopScroll();
}
}, interval);
return id;
}
function stopScroll() {
clearInterval(scrollerID);
}
document.body.addEventListener('keypress', function(event) {
if (event.which == 13 || event.keyCode == 13) {
// 'Enter' key
if (paused == true) {
scrollerID = startScroll();
paused = false;
} else {
stopScroll();
paused = true;
}
}
}, true);
出力：
-with-setInterval()-to-Auto-Scroll.webp)
ご覧のとおり、ページの最後に到達すると、ページのスクロールが停止します。また、手動でもう一度上にスクロールすると、スクローラーをもう一度再生できるので安心です。
したがって、自動スクロール動作を実装できます。
