React + TypeScript | スクロール位置に応じたclass追加・削除

Question

やりたい事

下記のコンポーネントを、ページトップの時だけclassName={s.scroll}を外し、スクロール量（例えば40px）に応じて前述のclassを戻したいです。（付け直す）

MobileNav.tsx

import React, { ReactNode } from 'react';

import { Link } from 'components/link/Link';

import s from './Nav.scss';

interface MobileNavProps {
  children: ReactNode;
}

export const MobileNav = ({ children }: MobileNavProps) => {
  <nav id={s.mobile__nav} className={s.scroll}>
   {children}
  </nav>
);

パッケージ(Headroom.jsなど)を使えば実現できるのですが、
このくらいの実装であれば、自分で書いた方がいいのでは？と考え今に至ります。（結局、Teratailに頼っていますが...）

React + TypeScriptでこの実装を実現するのに、一番スマートな方法をご教授できれば幸いです。
一方的な質問で大変恐縮ですが、何卒よろしくお願いいたします。

Answer 1

scrollの監視はuseEffectを使って windowのscroll監視を行なうと良さそうです。

demo

1. scroll 判定用のフラグを用意する
2. scrollイベント監視のセット関数を用意する
3. 高さが超えているか判定する関数を用意する
4. scrollイベント監視
5. コンポーネントが消えたときに監視を停止する

// scroll が高さを超えているとき trueになるstate
const [isHeightOver, setIsHeightOver] = React.useState(false); //1.

useEffect(() => { // 2.
  const scrollAction = () => { // 3.
    if (150 > window.scrollY) { // 150の値は 判定したい高さに変更する
      setIsHeightOver(true);
    } else {
      setIsHeightOver(false);
    }
  };
  window.addEventListener("scroll", scrollAction, {
    capture: false,
    passive: true,
  }); // 4.
  scrollAction(); // 初期描画時に一度だけ判定する

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

return <div className={isHeightOver ? 'isHeightOver' : ''}>classを変更したいhtml</div>

Comments

[kerry]

ご丁寧な回答ありがとうございます。
また、CodeSandboxでのデモまで作成した頂き、大変恐縮です！

無事動きました。
デモをフォークして、理解を深めようと思います！

本当にありがとうございました。