【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【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でスクロールバーの位置を要素の最下部に設定する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍