React 中如何实现溢出列表仅在组件内部按规则自动滚动

• 第一步：给列表外层容器设置独立滚动样式，确保溢出内容仅在容器内部产生滚动：
  给容器添加如下CSS属性，高度可根据业务需求调整：

  .list-scroll-wrapper {
    max-height: 500px;
    overflow-y: auto;
  }
  

• 第二步：绑定列表容器的ref，所有滚动逻辑仅作用于该容器本身，不要调用页面级的滚动方法：
  示例代码如下：

  import { useRef, useEffect } from 'react';
  
  const ScrollList = ({ dataList }) => {
    const listWrapperRef = useRef(null);
  
    // 页面加载、列表数据更新时触发内部滚动
    useEffect(() => {
      const listWrapper = listWrapperRef.current;
      if (!listWrapper) return;
      // 直接修改容器自身的滚动位置，仅作用于容器内部，不会触发页面滚动
      listWrapper.scrollTop = listWrapper.scrollHeight;
      // 如需平滑滚动可使用以下写法
      // listWrapper.scrollTo({
      //   top: listWrapper.scrollHeight,
      //   behavior: 'smooth'
      // })
    }, [dataList]);
  
    return (
      <div className="list-scroll-wrapper" ref={listWrapperRef}>
        {dataList.map((item, index) => (
          <div key={index} className="list-item">{item.content}</div>
        ))}
      </div>
    )
  }
  

• 方案效果说明：
  由于操作的是独立滚动容器的自有滚动属性，该滚动行为仅在容器内部生效，不会向上传递影响页面整体滚动位置。页面加载时哪怕列表不在可视区域，也只会在容器内部预先设置好滚动到底部的状态，等用户手动滚动到列表所在位置时，看到的就是已经滚动到底部的列表内容。

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