【JavaScript】 追加した要素までスクロールして要素を表示する

動的にDOM要素を追加したとき、その要素をユーザーの目に入る位置に表示したいことがあります。
今回は、その方法をお伝えします。

例えばdiv要素内に要素を追加して、その要素を表示したいときはdiv要素の最下部まで移動させる必要がある。

div要素の最下部に移動

次のようにdiv要素の高さが固定で、overflow属性にスクロール表示可能な値がセットされているとする。

コード

<style>
        #tdiv{
            overflow:auto;
            height:150px;
            width:100%;
            border: 1px solid black;
        }
</style>

<div id="tdiv"></div>

次のコードで、div要素の最下部まで移動できます。

const tdiv = document.getElementById( "tdiv" );
tdiv.scrollTop = tdiv.scrollHeight;

解説

scrollTopは表示されているエリアの上座標です。
scrollHeightは、表示されていないエリアも含めた高さです。

最下部を表示したときのscrollTopの値は、scrollHeightから表示されている高さを引いた値です。
scrollTopにそれ以上の値（scrollHeight）をセットすると、自動で補正されます。

デモ

押してください

scrollTopMaxは、scrollTopに設定できる最大値です。
ただし標準的な機能でないため、一部のブラウザのみで使用できます。

追加した要素まで移動

div要素に追加した要素が表示エリアの高さより大きい場合、最下部までスクロールしてしまうと見た目がよくありません。

この場合、追加した要素の上端がdiv要素内に収まるように移動させます。

コード

<style>
        #tdiv{
            overflow:auto;
            height:150px;
            width:100%;
            border: 1px solid black;
        }
        .adddiv{
            height:200px;
            width:80%;
            margin: 10px auto;
            border: 1px solid black;
        }
</style>

<div id="tdiv"></div>

#tdiv内にadddivクラスを持つdiv要素を追加します。

このとき、次のコードで追加した要素の上端まで移動できます。

const tdiv = document.getElementById( "tdiv" );

const adddiv = document.createElement("div");
adddiv.classList.add("adddiv");

tdiv.appendChild(adddiv);
adddiv.scrollIntoView({block:"nearest"});

解説

scrollIntoViewメソッドは、親要素の位置とスクロール設定を補正して、要素をブラウザ上に表示します。

指定する引数によって、表示のされ方が変わります。

true : 要素の上端が表示されるのに加え、親要素も可能な範囲で上端に移動します。

false : 要素の下端が表示されるのに加え、親要素も可能な範囲で下端に移動します。

真偽値の他に、オブジェクトで指定できます。

{
    behavior : アニメーションの方法 "auto" または "smooth"

    block : 上下方向の移動
              "start" 上端 
              "center" 中央 
              "end" 下端 
              "nearest" 現在位置からまり移動させない

    block : 上下方向の移動
              "start" 左端 
              "center" 中央 
              "end" 右端 
              "nearest" 現在位置からまり移動させない
}

デモ

押してください

ページ下部までスクロールして表示させたいときは、次のコードを使用します。

window.scrollTo(0,document.documentElement.scrollHeight);

実際の目的はページ下部にある要素を表示したいというケースが多いと思います。

その場合は、表示したい要素にIDを付加してscrollIntoViewメソッドを使用してください。