如何在MUI5中根据父容器滚动位置动态隐藏粘性元素

本文详细介绍了在material-ui 5中，如何利用`usescrolltrigger`钩子函数，结合`useref`和`usestate`，实现当父容器滚动到特定位置时，动态隐藏或显示一个`position="sticky"`的粘性元素。教程通过具体的代码示例，演示了如何将父容器作为滚动目标，并根据滚动阈值来控制粘性元素的可见性，从而优化用户体验。

在MUI5中实现基于父容器滚动的粘性元素隐藏

在Web开发中，我们经常需要创建一些在用户滚动页面时保持可见的元素，即粘性（sticky）元素。然而，有时我们需要在特定条件下（例如，当用户滚动到父容器的底部或某个特定位置时）隐藏这些粘性元素，以提供更流畅或更符合上下文的用户体验。Material-UI (MUI5) 提供了useScrollTrigger钩子，它通常用于监听窗口滚动，但通过一些技巧，我们也可以使其监听特定父容器的滚动。

本教程将详细介绍如何利用MUI5的useScrollTrigger钩子，结合React的useRef和useState，实现在父容器滚动到指定阈值时，动态隐藏或显示一个粘性元素。

核心概念与实现思路

要实现这一功能，我们需要解决两个关键问题：

1. 确定滚动目标： useScrollTrigger默认监听window的滚动。我们需要将其配置为监听特定的父容器。
2. 动态控制可见性： 根据useScrollTrigger返回的状态，来控制粘性元素的显示或隐藏。

解决这两个问题的核心在于：

• 使用useRef来获取父容器的DOM引用。
• 使用useState来存储这个DOM引用，并将其作为useScrollTrigger的target属性。这是因为useRef.current在组件初次渲染时可能为null，而useScrollTrigger需要一个稳定的DOM节点作为目标。
• useScrollTrigger的threshold属性将定义触发显示/隐藏的滚动距离。

完整实现步骤

下面我们将通过一个完整的React/MUI5组件示例来演示如何实现。

1. 导入必要的Hooks和组件

首先，确保你已经导入了React相关的Hooks以及MUI的Box组件和useScrollTrigger。

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

2. 定义组件结构和状态

我们将创建一个名为BoxSx的函数组件。在这个组件中，我们将定义：

课游记AI

AI原生学习产品

70

查看详情

• 一个parentRef，用于引用作为滚动容器的Box。
• 一个node状态，用于存储parentRef.current，并将其传递给useScrollTrigger。
• showSticky布尔值，由useScrollTrigger返回，用于控制粘性元素的可见性。

export default function BoxSx() {
  const parentRef = React.useRef(null);
  const [node, setNode] = React.useState(undefined);

  // showSticky将根据滚动阈值决定是否为true
  const showSticky = useScrollTrigger({
    target: node, // 将父容器的DOM节点作为滚动目标
    threshold: 100 // 定义滚动100px后触发
  });

  // 使用useEffect在组件挂载后设置node状态
  // 确保parentRef.current在useScrollTrigger被初始化时可用
  React.useEffect(() => {
    setNode(parentRef.current);
  }, []); // 空数组表示只在组件挂载时运行一次

  // 辅助调试，查看showSticky的状态
  console.log('Show Sticky:', showSticky);

  // ... (JSX结构将在下一步定义)
}

解释：

• parentRef = React.useRef(null)：创建一个ref对象，用于在JSX中绑定到我们的滚动父容器Box。
• [node, setNode] = React.useState(undefined)：node状态将存储parentRef.current的DOM节点。初始值为undefined。
• useScrollTrigger({ target: node, threshold: 100 })：这是核心。target属性被设置为node状态，这样useScrollTrigger就会监听node所代表的DOM元素的滚动。threshold: 100表示当滚动距离超过100像素时，showSticky将变为true。
• React.useEffect(() => { setNode(parentRef.current); }, [])：parentRef.current只有在组件渲染后才能获取到真实的DOM节点。useEffect确保在组件挂载后，我们将parentRef.current的值赋给node状态。由于依赖项数组为空[]，这个效果只会在组件初次渲染后执行一次。

3. 构建JSX结构

现在，我们将把父容器和粘性元素添加到JSX中。粘性元素的可见性将通过showSticky状态来控制。

export default function BoxSx() {
  const parentRef = React.useRef(null);
  const [node, setNode] = React.useState(undefined);

  const showSticky = useScrollTrigger({
    target: node,
    threshold: 100
  });

  React.useEffect(() => {
    setNode(parentRef.current);
  }, []);

  console.log('Show Sticky:', showSticky);

  return (
    <Box
      sx={{
        width: 400,
        height: 300, // 设置一个固定高度，以便内容溢出产生滚动条
        overflow: 'auto', // 允许内容溢出时滚动
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      ref={parentRef} // 将parentRef绑定到这个Box
    >
      {/* 模拟大量内容以产生滚动 */}
      <ul>
        {Array.from({ length: 100 }, (_, index) => (
          <li key={index}>{`列表项 ${index + 1}`}</li>
        ))}
      </ul>

      {/* 粘性元素，根据showSticky状态控制其可见性 */}
      <Box
        position="sticky"
        bottom={0} // 粘在底部
        bgcolor="white"
        p={2}
        boxShadow={2}
        zIndex={100}
        // 根据showSticky状态动态改变样式
        sx={{
          transition: 'opacity 0.3s ease-in-out', // 添加过渡效果
          opacity: showSticky ? 1 : 0, // 当showSticky为true时完全不透明，否则完全透明
          pointerEvents: showSticky ? 'auto' : 'none', // 当隐藏时禁用交互
        }}
      >
        这是一个粘性元素，当父容器滚动超过100px时显示
      </Box>
    </Box>
  );
}

关键样式说明：

• 父容器 Box:
  • height: 300：为了让内容溢出并产生滚动条，需要给父容器一个固定高度。
  • overflow: 'auto'：这是关键，它使父容器在其内容溢出时具有滚动能力。
  • ref={parentRef}：将parentRef绑定到此Box，以便我们可以获取其DOM节点。
• 粘性元素 Box:
  • position="sticky"：使其成为粘性元素。
  • bottom={0}：使其粘在父容器的底部。
  • opacity: showSticky ? 1 : 0：这是控制可见性的主要方式。当showSticky为true时，opacity为1（可见）；否则为0（透明）。
  • pointerEvents: showSticky ? 'auto' : 'none'：当元素透明时，我们通常也希望它不响应鼠标事件。pointerEvents: 'none'可以禁用其交互。
  • transition: 'opacity 0.3s ease-in-out'：添加一个平滑的过渡效果，使元素的显示和隐藏更加自然。

运行效果

当你在浏览器中运行这个组件时，你会观察到：

1. 父容器Box内部有一个滚动条。
2. 当你开始滚动父容器时，在滚动距离达到100像素之前，底部的粘性Box是不可见的（opacity: 0）。
3. 一旦滚动距离超过100像素，粘性Box会平滑地显示出来（opacity: 1）。
4. 当你向上滚动，距离小于100像素时，粘性Box会再次平滑地隐藏。

注意事项与扩展

• threshold的调整： threshold的值决定了滚动触发的灵敏度。你可以根据实际需求调整这个值。
• 隐藏方式： 除了使用opacity: 0和pointerEvents: 'none'，你还可以使用其他CSS属性来隐藏元素，例如：
  • display: showSticky ? 'block' : 'none'：这会完全移除元素，不占据空间，但没有过渡效果。
  • visibility: showSticky ? 'visible' : 'hidden'：元素仍然占据空间，但不可见。
• 滚动方向： useScrollTrigger默认是监听向下滚动。如果你需要监听向上滚动或更复杂的滚动方向，可能需要结合direction属性或自定义滚动逻辑。
• 性能： 对于频繁触发的滚动事件，useScrollTrigger已经做了性能优化。但在大型应用中，仍然需要注意避免在滚动回调中执行昂贵的计算。
• position="sticky"的父级： position: sticky元素相对于其最近的具有滚动机制的祖先元素（而不是其直接父元素）进行定位。确保你的父容器设置了overflow: auto或scroll，并且有明确的高度或最大高度。

总结

通过结合MUI5的useScrollTrigger钩子、React的useRef和useState，我们可以优雅地实现在特定父容器内根据滚动位置动态显示或隐藏粘性元素的功能。这种模式不仅增强了用户界面的交互性，也使得复杂的滚动行为控制变得更加灵活和可维护。理解并掌握这种技术，将有助于你在MUI5项目中创建更高级、更具响应性的用户体验。

以上就是如何在MUI5中根据父容器滚动位置动态隐藏粘性元素的详细内容，更多请关注php中文网其它相关文章！