在MUI5中实现粘性元素（Sticky Div）在父容器底部隐藏的教程

import React from 'react';
import { Box, useScrollTrigger } from '@mui/material';

export default function StickyHideOnBottom() {
  const parentRef = React.useRef(null);
  // ... 其他状态和逻辑

  return (
    <Box
      sx={{
        width: 400,
        height: 300, // 初始高度，确保可滚动
        overflow: 'auto', // 关键：使Box可滚动
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      ref={parentRef} // 将ref绑定到父Box
    >
      {/* 滚动内容 */}
      <ul>
        {Array.from({ length: 50 }, (_, index) => (
          <li key={index}>{`列表项 ${index + 1}`}</li>
        ))}
      </ul>
      {/* 粘性元素 */}
      <Box
        position="sticky"
        bottom={0}
        bgcolor="white"
        p={2}
        boxShadow={2}
        zIndex={100}
      >
        这个粘性Div将在父容器底部隐藏
      </Box>
    </Box>
  );
}

// ... (之前的导入和parentRef定义)

export default function StickyHideOnBottom() {
  const parentRef = React.useRef(null);
  const [scrollTargetNode, setScrollTargetNode] = React.useState(undefined);

  // 当组件加载后，将ref.current赋值给state，确保useScrollTrigger能获取到DOM节点
  React.useEffect(() => {
    setScrollTargetNode(parentRef.current);
  }, []);

  // useScrollTrigger 可以用来检测是否滚动了一段距离，但不能直接检测“底部”
  // const scrolledDown = useScrollTrigger({
  //   target: scrollTargetNode,
  //   threshold: 100, // 滚动100px后触发
  // });
  // console.log('Scrolled down:', scrolledDown); // 示例：检测是否向下滚动了100px

  // ... 其他逻辑和渲染
}

import React from 'react';
import { Box } from '@mui/material'; // 移除useScrollTrigger，如果不需要其其他功能

export default function StickyHideOnBottom() {
  const parentRef = React.useRef(null);
  const [hideSticky, setHideSticky] = React.useState(false);

  const handleScroll = () => {
    if (parentRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
      // 当 scrollTop + clientHeight 约等于 scrollHeight 时，表示已滚动到底部
      // 增加一个小的容差值 (例如 5px) 以应对浮点数计算和不同浏览器行为
      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
      setHideSticky(isAtBottom);
    }
  };

  // 在组件挂载后添加滚动事件监听器，并在卸载时移除
  React.useEffect(() => {
    const parentElement = parentRef.current;
    if (parentElement) {
      parentElement.addEventListener('scroll', handleScroll);
      // 初始检查，如果内容不足以滚动，也可能一开始就在底部
      handleScroll(); 
    }
    return () => {
      if (parentElement) {
        parentElement.removeEventListener('scroll', handleScroll);
      }
    };
  }, []); // 空依赖数组确保只在挂载和卸载时运行

  return (
    <Box
      sx={{
        width: 400,
        height: 300,
        overflow: 'auto',
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      ref={parentRef}
    >
      <ul>
        {Array.from({ length: 50 }, (_, index) => (
          <li key={index}>{`列表项 ${index + 1}`}</li>
        ))}
      </ul>
      {/* 根据hideSticky状态条件渲染或改变样式 */}
      <Box
        position="sticky"
        bottom={0}
        bgcolor="white"
        p={2}
        boxShadow={2}
        zIndex={100}
        // 使用opacity或display控制可见性
        sx={{
          transition: 'opacity 0.3s ease-in-out', // 添加过渡效果
          opacity: hideSticky ? 0 : 1,
          pointerEvents: hideSticky ? 'none' : 'auto', // 隐藏时禁用交互
        }}
      >
        这个粘性Div将在父容器底部隐藏
      </Box>
    </Box>
  );
}

import * as React from 'react';
import { Box } from '@mui/material';

/**
 * StickyHideOnBottom 组件
 * 实现一个粘性元素在父容器滚动到底部时自动隐藏的功能。
 */
export default function StickyHideOnBottom() {
  // 用于引用父滚动容器的ref
  const parentRef = React.useRef(null);
  // 状态变量，控制粘性元素的显示/隐藏
  const [hideSticky, setHideSticky] = React.useState(false);

  /**
   * 滚动事件处理器
   * 计算当前滚动位置，判断是否到达父容器底部。
   */
  const handleScroll = React.useCallback(() => {
    const parentElement = parentRef.current;
    if (parentElement) {
      const { scrollTop, scrollHeight, clientHeight } = parentElement;
      // 判断是否滚动到底部
      // scrollTop + clientHeight 等于 scrollHeight 时表示完全到底部
      // 增加一个小的容差值 (例如 5px) 以提高兼容性
      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
      setHideSticky(isAtBottom);
    }
  }, []); // 空依赖数组，确保函数引用稳定

  /**
   * useEffect 钩子
   * 在组件挂载时添加滚动事件监听器，并在组件卸载时移除。
   * 同时在初始渲染后执行一次滚动检查，以处理内容不足以滚动的情况。
   */
  React.useEffect(() => {
    const parentElement = parentRef.current;
    if (parentElement) {
      // 添加滚动事件监听器
      parentElement.addEventListener('scroll', handleScroll);
      // 首次渲染时执行一次检查，确保初始状态正确
      handleScroll();
    }
    // 清理函数：在组件卸载时移除事件监听器，防止内存泄漏
    return () => {
      if (parentElement) {
        parentElement.removeEventListener('scroll', handleScroll);
      }
    };
  }, [handleScroll]); // 依赖handleScroll，确保在handleScroll变化时重新注册监听器

  return (
    <Box
      sx={{
        width: 400,
        height: 300, // 设置一个固定高度，使其内部内容可以滚动
        overflow: 'auto', // 启用滚动条
        border: '1px solid #ccc',
        borderRadius: '4px',
        margin: '20px auto', // 居中显示，方便查看
        position: 'relative', // 如果粘性元素是相对于此Box定位，此Box需有定位上下文
      }}
      ref={parentRef} // 将ref绑定到这个Box，使其成为滚动容器
    >
      {/* 模拟大量可滚动内容 */}
      <ul>
        {Array.from({ length: 50 }, (_, index) => (
          <li key={index} style={{ padding: '8px 16px', borderBottom: '1px dotted #eee' }}>
            {`滚动列表项 ${index + 1}`}
          </li>
        ))}
      </ul>

      {/* 粘性定位的Box，其可见性由hideSticky状态控制 */}
      <Box
        position="sticky" // 启用粘性定位
        bottom={0} // 粘在底部
        bgcolor="white"
        p={2}
        boxShadow={3} // 增加阴影，使其更突出
        zIndex={100}
        sx={{
          // 添加CSS过渡效果，使隐藏/显示更平滑
          transition: 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out',
          opacity: hideSticky ? 0 : 1, // 根据hideSticky状态改变透明度
          visibility: hideSticky ? 'hidden' : 'visible', // 隐藏时设置为hidden，防止交互
          pointerEvents: hideSticky ? 'none' : 'auto', // 隐藏时禁用鼠标事件
          borderTop: '1px solid #eee', // 顶部边框
          textAlign: 'center',
          fontWeight: 'bold',
          color: hideSticky ? 'transparent' : 'black', // 隐藏时文本也透明
        }}
      >
        当父容器滚动到底部时我将隐藏
      </Box>
    </Box>
  );
}