【Edge対応】スクロールの開始位置を常に一番下に設定する方法

こんにちは。

スクロールの開始位置を常に一番下に設定したい場合ってありますよね。
例えば、ラインのようなメッセージのやり取りができるプラットフォームを作る場合、
常に一番下に最新メッセージを表示させたい、とか。

そういった場合に役に立つ方法があったので紹介します。

scrollIntoView()を使う

これです。

まずはコードを書いてみましょう。

<div class="scroll">
    <div id="scroll-inner">
        <!-- ここにコンテンツ-->
    </div>
</div>

.scroll{
    overflow-y: scroll;
    height: 300px;
}
#scroll-inner{
    height: 600px;
}

let target = document.getElementById('scroll-inner');
target.scrollIntoView(false);

scrollIntoView()のポイントは、指定した要素の上端または下端までスクロールするということです。

scrollIntoView(true)なら上端まで、scrollIntoView(false)なら下端までとなります。

scroll()はoverflow-y: scroll;を指定した要素に対して使いますが、scrollIntoView()はその子要素に対して使用します。

scroll()を使っても同じことはできますが、scroll()はEdgeではエラーになるというデメリットもあります。