JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで一定間隔ごとにスクロールビューを制御・設定する方法

JavaScriptでスクロールビューに一定間隔で新しいコンテンツを追加しながら、自動的に最下部へスクロールさせたい場合は、scrollTop と scrollHeight というプロパティの概念を利用します。

scrollTop と scrollHeight の基本

  • scrollTop: 要素が現在下方向にどれだけスクロールされているかを示す値です。
  • scrollHeight: 隠れた部分も含めた、要素全体の高さを示します。

この2つを組み合わせて element.scrollTop = element.scrollHeight とすれば、常に要素の最下部へスクロールさせることができます。さらに setInterval() を併用すると、指定した時間間隔で処理を繰り返し実行できます。

実装例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
    #scrollDemo {
        height: 300px;
        overflow-y: scroll;
    }
    #scrollDataFeatures {
        height: 500px;
        background-color: skyblue;
    }
</style>
</head>
<body>
<div id="scrollDemo">
<div id="scrollDataFeatures"></div>
<h3>See the below Message and Scroll UP</h3>
</div>
<script>
    var scrollData = document.getElementById("scrollDemo");
    scrollData.scrollTop = scrollData.scrollHeight
    setInterval(() =>{
        var heading3Data = document.createElement("h3");
        heading3Data.innerHTML = "Scroll Down...Please Scroll UP"
        scrollData.appendChild(heading3Data);
        scrollData.scrollTop = scrollData.scrollHeight
    }, 30*1000)
</script>
</body>
</html>

コードの解説

  • #scrollDemo は高さ300px・縦方向にスクロール可能なコンテナ要素です。
  • #scrollDataFeatures は高さ500pxの水色（skyblue）背景を持つ内部要素で、親要素より大きいためスクロールが発生します。
  • ページ読み込み直後に scrollTop = scrollHeight を設定することで、初期状態で最下部までスクロールされます。
  • setInterval() により30秒ごとに新しい <h3> 要素が追加され、追加のたびに自動的に最下部へスクロールします。

プログラムの実行方法

上記のプログラムを実行するには、コードを anyName.html（または index.html）という名前で保存し、VSCodeエディター上でファイルを右クリックして「Open with Live Server」を選択してください。

実行結果

まず、ページを開いた直後は以下のように表示されます −

JavaScriptで一定間隔ごとにスクロールビューを制御・設定する方法

30秒（30秒間隔）が経過するたびに、次のようなメッセージが新しく追加されます −

Scroll Down...Please Scroll UP.

すると、出力は以下のように変化します −

JavaScriptで一定間隔ごとにスクロールビューを制御・設定する方法

まとめ

scrollTop と scrollHeight を組み合わせれば、チャットログや通知フィードなど「常に最新情報を最下部に表示したい」UIを簡単に実装できます。setInterval() の間隔を変更すれば、更新タイミングも自由に調整可能です。

  1. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal