【React】任意の場所まで自動スクロールさせる方法

はじめに

任意の場所まで自動スクロールするには、標準のWebAPIで提供されているElement.scrollIntoView()が便利です。
チャットアプリで送受信に合わせて最新のメッセージまでスクロールしたい時などに使えます。

DOMのElementはReactであればReact.useRef()で取得することができます。

実装の例

任意の場所にスクロールしたい場合、あらかじめその場所に透明な<div/>を仕込んでおくと便利です。

• 透明な<div/>を長いリストの最後に仕込んでおく
• React.useRef()で透明な<div/>の参照を取得
• 透明な<div/>の参照に対してElement.scrollIntoView()`を使用する

関数コンポーネント

const messageEndRef = React.useRef();

const scrollToLatest = (behavior = 'smooth') => messageEndRef.current.scrollIntoView({ behavior });

return (
<List>
  {renderMessages()}
  <div
    style={{ float:"left", clear: "both" }}
    ref={messagesEndRef}
  />
</List>

まとめ

• 標準のWebAPIで提供されているElement.scrollIntoView()を使うと簡単に自動スクロールできます。
• Element.scrollIntoView()を使う対象として、透明な<div/>を使う方法があります。

参考

Element.scrollIntoView() – Web API | MDNhttps://developer.mozilla.org