css

overflow-auto付き要素を予め下までスクロールさせておく方法

チャットアプリなどで、下まで(最新情報まで)スクロールさせておきたい場面があります。

その時に使用するコードです。

結論:scrollIntoViewを使う

以下のHTML要素を想定します。

<div style="overflow:auto">
 <div id="scroll-content">
...スクロール要素...
 </div>
</div>

このとき 、jsで以下のように記述すればOKです。

/**
 * メッセージ欄を下までスクロールさせておく
 */
function scrollToBottom ()
{
    $( "#scroll-content" )[ 0 ].scrollIntoView( false );
}

スクロールさせたい段階でscrollToBottom ()を呼び出してください。

-css

© 2021 ストロテクトNote