如何使用Material UI实现类似React官网的向上滚动切换效果？

Material UI没有直接提供实现该效果的现成组件，但可以通过它的布局组件结合React的滚动监听逻辑快速实现，下面是具体步骤和代码示例：

核心思路 #

监听页面滚动方向或滚动距离，根据滚动状态切换顶部栏内的显示内容。这里用Material UI的AppBar作为容器（它自带固定定位特性，适合做这类滚动变化的顶部元素），配合React的状态管理和滚动事件监听完成逻辑。

实现步骤 #

1. 状态与滚动位置记录

   • 用useState维护当前显示的内容状态（比如isScrolled标记是否触发内容切换）
   • 用useRef记录上一次的滚动位置，用来判断滚动方向

2. 滚动事件监听

   • 在useEffect中添加全局滚动监听，组件卸载时移除监听
   • 在滚动处理函数中对比当前与上一次的滚动位置，判断是否为向上滚动，更新状态

3. 条件渲染内容

   • 根据isScrolled状态，在AppBar的Toolbar中渲染不同内容

代码示例 #

import { useState, useEffect, useRef } from 'react';
import { AppBar, Toolbar, Typography, Box } from '@mui/material';

export default function ScrollSwitchBar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const lastScrollY = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      // 向上滚动且超过50px阈值时触发切换
      if (currentScrollY < lastScrollY.current && currentScrollY > 50) {
        setIsScrolled(true);
      } else if (currentScrollY >= lastScrollY.current || currentScrollY <= 50) {
        setIsScrolled(false);
      }
      lastScrollY.current = currentScrollY;
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <AppBar position="fixed" sx={{ backgroundColor: '#fff', color: '#000' }}>
      <Toolbar>
        {isScrolled ? (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Typography variant="h6">React 社区</Typography>
            <Typography variant="body1">Stack Overflow</Typography>
          </Box>
        ) : (
          <Typography variant="h5">React 社区 - Stack Overflow</Typography>
        )}
      </Toolbar>
    </AppBar>
  );
}

细节调整 #

• 可自行修改滚动阈值（代码中的50），控制内容切换的触发时机
• 通过sx属性自定义AppBar的背景色、文字大小等样式，匹配设计需求
• 若需要更复杂的内容切换（比如替换图标、按钮组），只需在条件渲染区块内调整Material UI组件即可

内容的提问来源于stack exchange，提问作者william007