【JavaScript】スクロールバーの位置を要素の最下部に設定する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで要素のスクロール位置を最下部に設定する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

結論

スクロール位置を要素の最下部に設定する方法は下記の通りです。

const el = document.getElementById('el');
el.scrollTo(0, el.scrollHeight);

1行目で要素を取得し、2行目でscrollHeightにて取得した要素の高さ（画面上に表示されていない部分も含む）を取得し、scrollToでスクロールバーの位置を設定します。こうすることでスクロールの位置を要素の最下部に設定することができます。

スクロールバーの位置を要素の最下部に設定してみる

確認用に作成したデモがこちら。下記デモ内の「リストアイテム追加」のボタンをクリックするとリストに要素が追加され、スクロールバーは常に最下部に表示されます。

See the Pen
Set scrollbar position to bottomJavaScriptt by ryohei (@intotheprogram)
on CodePen.

ソースは下記の通りです。処理内容につきましては、コメントをご参照いただければと思います。

HTML

<div id="app">
    <ul id="list">
        <li>TEST</li>
        <li>TEST</li>
    </ul>
    <button id="btn" type="button">リストアイテム追加</button>
</div>

JavaScript

const btn = document.getElementById('btn');

btn.addEventListener('click', ()=>{
    //リストを取得
    const list = document.getElementById('list');
    //リストアイテムを挿入
    list.insertAdjacentHTML('beforeend', '<li>ADD ITEM</li>');
    //スクロールバーの位置をリストの最下部に設定
    list.scrollTo(0, list.scrollHeight);
}, false);

最後に

スクロールバーを最下部に設定する方法は、チャットのように処理を追加するものに向いています。同様の処理を実装するい場合に参考にしていただければ幸いです。

以上、JavaScriptでスクロールバーの位置を要素の最下部に設定する方法のご紹介でした！