LINE、Discordのような自動スクロール機構を実装した

メッセージが流れてきた際に、自動でスクロールしてもらう機構を作った。

index.js

function needScroll() {
	const x = container.scrollHeight - (container.scrollTop + container.offsetHeight);
	if (x > 0) return false;
	else return true;
}

function Scroll() {
	container.scrollTop = container.scrollHeight;
}

使うときはこう

index.js

if (needScroll()) Scroll()

改善点はちょっとあるかも。

containerの部分はgetElementById()とかで取得したHTMLElementが入るのを想定している。

needScroll()の方は、scrollHeightからscrollTopとoffsetHeightを引いて、0を下回れば一番下までスクロールしてると見なしてtrueを返す。そうでなければfalseを返すシンプルなつくり

Scroll()でscrollTopにscrollHeightをセットして、一番下まで移動させる。

別の方法を書いている記事もあったけど、動かなかったので私の知識メモとして投稿。