1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptで画面更新時にスクロール位置を指定する方法

Posted at

タイトルに表題についてハマったので備忘録として記載しておきます

例えば、ラインのようなチャット機能でコメントを送信すると一番下にスクロールされるようなUIの実装方法として様々な実装方法がありますが、JavaScriptを用いた実装方法を紹介します。(むしろ、この実装方法しかできなかった)

では、コードとしては以下記載します

index.html
<div id="chat-room">
 <ul>
  <!-- 略 -->
</ul>
</div>

<script type="text/javascript">
  const el = document.getElementById('chat-room');
  el.scrollTo(0, el.scrollHeight);
</script>

ScrollTo関数が指定の位置(x, y座標)に移動する関数です
チャットルームの表示領域のelement(ここではgetElementByIdで('chat-room'))を取得し、それをx座標(水平方向)を0、y座標はelのscrollHeightを指定すると指定の挙動になるかと思います

といっても、ここではチャットのコメントを送信すると下にスクロールするというよりは、上記のコードは画面遷移するたびに要素を取得して指定の場所にスクロールさせてる認識の方がいいかもですね

問題解決の一端になればLGTMお願いいたします。
なにか、間違っていればコメントでお知らせください

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?