React中如何滚动到div内的span元素，使其始终可见不被溢出遮挡

核心实现逻辑 #

• 给外层滚动容器和当前高亮的currentWord span 分别绑定 React ref
• 监听当前激活索引idx的变化，每次变化时触发滚动逻辑，让高亮元素滚动到容器可见区域

完整代码示例 #

import { useRef, useEffect } from 'react';

const WordDisplay = () => {
  // 假设你的words、idx、classes变量已经在组件内定义，这里省略相关声明逻辑
  const words = ['示例', '单词', '列表', '...'];
  const idx = 0; 
  const classes = [];

  // 定义两个ref：外层容器ref、当前高亮单词的ref
  const wrapperRef = useRef(null);
  const currentWordRef = useRef(null);

  // 监听idx变化，触发滚动
  useEffect(() => {
    if (!currentWordRef.current || !wrapperRef.current) return;

    // 方式1：使用原生scrollIntoView方法，简单便捷
    currentWordRef.current.scrollIntoView({
      block: 'nearest', // 就近对齐，避免不必要的大幅滚动
      inline: 'start', // 横向滚动时左对齐，纵向滚动可改为'center'居中对齐
      behavior: 'smooth' // 可选，开启平滑滚动效果，不需要可删除
    });

    // 方式2：手动计算滚动偏移，适合需要精准控制滚动位置的场景
    // 横向滚动场景：
    // wrapperRef.current.scrollLeft = currentWordRef.current.offsetLeft - 10; // 减10是预留左侧边距，可自定义
    // 纵向滚动场景：
    // wrapperRef.current.scrollTop = currentWordRef.current.offsetTop - 10;
  }, [idx]);

  return (
    <div 
      id="wordDisplayWrapper" 
      ref={wrapperRef}
    >
      {words.map((word, i) => {
        if (i === idx) {
          return (
            <span 
              key={i} 
              ref={currentWordRef}
              className="currentWord"
            >
              {word}
            </span>
          );
        }
        return (
          <span key={i} className={classes[i] || "word"}>
            {word}
          </span>
        );
      })}
    </div>
  );
};

CSS 补充说明 #

1. 如果你是横向排列span超出容器宽度，需要给容器加overflow-x: auto才能支持滚动；如果是纵向排列，将原有的overflow-y: hidden改为overflow-y: auto
2. 如果需要隐藏滚动条同时保留滚动能力，可添加以下CSS：

#wordDisplayWrapper::-webkit-scrollbar {
  display: none;
}
#wordDisplayWrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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