【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入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら