ReactJSでスクロールを自由自在に！画面の一番下までスクロールする方法

2024-04-02

ReactJS で画面の一番下までスクロールする方法

ref と scrollIntoView を使う

概要

ref を使ってスクロールしたい要素を取得し、scrollIntoView メソッドを使ってその要素を画面の一番下までスクロールします。

コード例

const [scrollToBottom, setScrollToBottom] = React.useState(false);

const ref = React.createRef();

useEffect(() => {
  if (scrollToBottom) {
    ref.current.scrollIntoView({ behavior: "smooth" });
    setScrollToBottom(false);
  }
}, [scrollToBottom]);

return (
  <div>
    <button onClick={() => setScrollToBottom(true)}>一番下へスクロール</button>
    <div ref={ref}>長いコンテンツ...</div>
  </div>
);

利点

シンプルで分かりやすいコード
スムーズなスクロールを実現できる

欠点

コンポーネントがマウントされた後、スクロールを実行する必要がある
useEffect フックを使うため、レンダリングパフォーマンスに影響を与える可能性がある

useLayoutEffect と scrollIntoView を使う

useLayoutEffect フックを使って、コンポーネントのレンダリング後にスクロールを実行します。

const ref = React.createRef();

useLayoutEffect(() => {
  ref.current.scrollIntoView({ behavior: "smooth" });
}, []);

return (
  <div>
    <div ref={ref}>長いコンテンツ...</div>
  </div>
);

useLayoutEffect フックはブラウザによってはサポートされていない

ライブラリを使う

react-scroll などのライブラリを使って、スクロールを簡単に実現できます。

import { Element } from "react-scroll";

return (
  <div>
    <Element name="scrollToBottom">
      長いコンテンツ...
    </Element>
    <button onClick={() => scrollTo("scrollToBottom")}>一番下へスクロール</button>
  </div>
);

さまざまなオプションを指定してスクロールをカスタマイズできる
コードがシンプルになる

ライブラリのインストールと設定が必要

どの方法を使うかは、状況によって異なります。シンプルな方法を求める場合は、ref と scrollIntoView を使う方法がおすすめです。スムーズなスクロールやパフォーマンスを重視する場合は、useLayoutEffect と scrollIntoView を使う方法や、ライブラリを使う方法を検討してみてください。

補足

上記のコード例は基本的なものです。詳細については、各方法の公式ドキュメントを参照してください。
スクロールアニメーションなど、より高度なスクロール機能を実装したい場合は、react-motion などのライブラリを使うこともできます。

ref と scrollIntoView を使う

const App = () => {
  const [scrollToBottom, setScrollToBottom] = React.useState(false);

  const ref = React.createRef();

  useEffect(() => {
    if (scrollToBottom) {
      ref.current.scrollIntoView({ behavior: "smooth" });
      setScrollToBottom(false);
    }
  }, [scrollToBottom]);

  return (
    <div>
      <button onClick={() => setScrollToBottom(true)}>一番下へスクロール</button>
      <div ref={ref} style={{ height: "500px", overflow: "scroll" }}>
        長いコンテンツ...
      </div>
    </div>
  );
};

export default App;

useLayoutEffect と scrollIntoView を使う

const App = () => {
  const ref = React.createRef();

  useLayoutEffect(() => {
    ref.current.scrollIntoView({ behavior: "smooth" });
  }, []);

  return (
    <div>
      <div ref={ref} style={{ height: "500px", overflow: "scroll" }}>
        長いコンテンツ...
      </div>
    </div>
  );
};

export default App;

このコードは、コンポーネントがマウントされた時に画面の一番下までスクロールするサンプルです。

ライブラリを使う

import React from "react";
import { Element } from "react-scroll";

const App = () => {
  return (
    <div>
      <Element name="scrollToBottom">
        長いコンテンツ...
      </Element>
      <button onClick={() => scrollTo("scrollToBottom")}>一番下へスクロール</button>
    </div>
  );
};

export default App;

このコードは、react-scroll ライブラリを使って画面の一番下までスクロールするサンプルです。

window.scrollTo を使う

window.scrollTo メソッドを使って、直接スクロールバーを操作します。

const App = () => {
  const scrollToBottom = () => {
    window.scrollTo(0, document.body.scrollHeight);
  };

  return (
    <div>
      <button onClick={scrollToBottom}>一番下へスクロール</button>
      <div style={{ height: "500px", overflow: "scroll" }}>
        長いコンテンツ...
      </div>
    </div>
  );
};

export default App;

ブラウザによっては動作が異なる可能性がある

onscroll イベントを使う

onscroll イベントを使って、スクロールバーの位置を監視し、一番下までスクロールされたことを検知します。

const App = () => {
  const [isScrolledToBottom, setIsScrolledToBottom] = React.useState(false);

  const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight) {
      setIsScrolledToBottom(true);
    } else {
      setIsScrolledToBottom(false);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div>
      {isScrolledToBottom && <p>一番下までスクロールされました</p>}
      <div style={{ height: "500px", overflow: "scroll" }}>
        長いコンテンツ...
      </div>
    </div>
  );
};

export default App;

画面の一番下までスクロールされたことを検知できる

パフォーマンスに影響を与える可能性がある

Intersection Observer API を使う

Intersection Observer API を使って、要素が画面内に表示されたかどうかを監視します。

const App = () => {
  const [isScrolledToBottom, setIsScrolledToBottom] = React.useState(false);

  const ref = React.createRef();

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        setIsScrolledToBottom(true);
      } else {
        setIsScrolledToBottom(false);
      }
    });
  });

  useEffect(() => {
    observer.observe(ref.current);

    return () => {
      observer.unobserve(ref.current);
    };
  }, []);

  return (
    <div>
      {isScrolledToBottom && <p>一番下までスクロールされました</p>}
      <div ref={ref} style={{ height: "500px", overflow: "scroll" }}>
        長いコンテンツ...
      </div>
    </div>
  );
};

export default App;

ブラウザによってはサポートされていない

reactjs

【初心者向け】React アプリをデプロイ！Netlify、Vercel、GitHub Pagesで簡単公開

ビルドエラー:ビルドプロセス中にエラーが発生している可能性があります。ターミナルまたはコンソールを確認し、エラーメッセージを確認してください。エラーメッセージの内容に基づいて、適切な解決策を講じる必要があります。一般的なエラーには、構文エラー、モジュールが見つからないエラー、互換性の問題などがあります。...

reactjs