MUIでの「AppBar」をスクロール時に隠す方法(備忘録)

2024-02-08

はじめに

環境

  • react: "^17.0.0 || ^18.0.0",
  • @mui/material:^5.15.9
  • @emotion/react:^11.11.3
  • @emotion/styled:^11.11.0

実装

下にスクロールしたときにAppBar(ヘッダー)が隠れるようにする処理です。
リファレンスにも記されていますが、備忘録として記します。

components/layout/header.tsx

import { AppBar, Slide } from "@mui/material";
import useScrollTrigger from '@mui/material/useScrollTrigger';

const Header = () => {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <AppBar position="fixed">ヘッダー</AppBar>
    </Slide>
  );
}
export default Header;

MUIの Slide コンポーネントは、要素の表示・非表示のアニメーションが適用されます。
useScrollTrigger() でスクロールイベントに応じ true | false を返します。
in プロパティは、スライドインのアニメーションを実行します。
つまり、スクロールが停止したら、スライドインをします。

方向を指定したい場合は、Slide に direction プロパティを設けます。

参考

Slide API
App Bar