如何获取Mui List当前可见项？实现滚动侧边栏高亮功能

以下是几个实用的实现方案，不局限于Mui List：

1. 浏览器原生Intersection Observer API #

这是最通用的Web端方案，适配任意列表组件：

• 给每个列表项和对应的侧边栏项设置匹配的唯一标识（比如相同ID）
• 初始化Intersection Observer，设置触发阈值（比如0.5，即元素一半进入视口时触发回调）
• 当列表项进入视口时，更新侧边栏的激活状态，为对应项添加高亮样式
• 核心代码示例：

import { useEffect, useState } from 'react';

function YourComponent() {
  const [activeItemId, setActiveItemId] = useState('item-1');

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setActiveItemId(entry.target.id);
        }
      });
    }, { threshold: 0.5 });

    document.querySelectorAll('.list-item').forEach(item => observer.observe(item));
    return () => observer.disconnect();
  }, []);

  return (
    <>
      {/* 侧边栏 */}
      <div className="sidebar">
        <div className={`sidebar-item ${activeItemId === 'item-1' ? 'active' : ''}`}>Item 1</div>
        <div className={`sidebar-item ${activeItemId === 'item-2' ? 'active' : ''}`}>Item 2</div>
      </div>
      {/* 滚动列表 */}
      <div className="scroll-list">
        <div id="item-1" className="list-item">Item 1 Content</div>
        <div id="item-2" className="list-item">Item 2 Content</div>
      </div>
    </>
  );
}

2. React Virtualized（高性能长列表场景） #

如果你的列表数据量大，推荐用这个专注虚拟滚动的库，它自带可见项监听能力：

• 使用库中的List组件，通过onRowsRendered回调获取当前可见行的索引范围
• 根据索引匹配侧边栏对应项，更新高亮状态
• 优势是自带虚拟滚动优化，避免长列表卡顿

3. 自定义滚动监听（基础实现） #

手动监听列表容器的滚动事件，计算元素位置：

• 获取列表容器的滚动位置，以及每个列表项的offsetTop值
• 滚动时通过计算确定当前处于视口内的列表项索引
• 注意给滚动事件添加节流处理，避免频繁计算影响性能

4. Mui生态的ScrollSpy组件 #

如果想继续使用Mui组件体系，可以用@mui/material/ScrollSpy：

• 给每个列表项设置唯一id
• 侧边栏项用ScrollSpyItem组件包裹，指定targetId为对应列表项的ID
• 组件会自动监听滚动，为当前对应的侧边栏项添加高亮样式

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