React の useOnWindowScroll フックでウィンドウスクロールをマスターする

はじめに

この実験では、React における useOnWindowScroll フックをどのように使用するかを検討します。このフックを使用することで、ウィンドウがスクロールされるたびにコールバックを実行することができます。このフックを使用することで、Window グローバルオブジェクトにスクロールリスナーを追加し、コンポーネントがアンマウントされたときにそれを削除することができます。このフックを使用することで、React コンポーネントにカスタムスクロール動作を簡単に追加することができます。

React useOnWindowScroll フック

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

この関数は、ウィンドウがスクロールされるたびにコールバック関数を実行します。それを実装するには：

useRef() フックを使用して参照変数 listener を作成します。
useEffect() フックと EventTarget.addEventListener() を使用して、Window オブジェクトの 'scroll' イベントをリッスンし、リスナー参照を listener.current に割り当てます。
コンポーネントがアンマウントされたときに、既存のリスナーを削除するために EventTarget.removeEventListener() を使用します。

以下がコードです：

const useOnWindowScroll = (callback) => {
  const listener = React.useRef(null);

  React.useEffect(() => {
    if (listener.current) {
      window.removeEventListener("scroll", listener.current);
    }
    listener.current = () => {
      callback(window.pageYOffset);
    };
    window.addEventListener("scroll", listener.current);
    return () => {
      window.removeEventListener("scroll", listener.current);
    };
  }, [callback]);
};

この関数をテストするには、次のようにコンポーネントで使用できます：

const App = () => {
  useOnWindowScroll((scrollY) => console.log(`scroll Y: ${scrollY}`));
  return <p style={{ height: "300vh" }}>Scroll and check the console</p>;
};

ReactDOM.render(<App />, document.getElementById("root"));

これにより、ウィンドウがスクロールされるたびに、ウィンドウの垂直方向のスクロール位置がコンソールにログ表示されます。

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは React useOnWindowScroll フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。