React中设置overflow:auto的div渲染后未从首个元素开始滚动的问题

问题触发原因 #

• 带href属性的<a>标签属于浏览器默认可聚焦交互元素，默认会被纳入页面Tab焦点序列。你遇到的滚动偏移本质是元素聚焦触发的浏览器默认滚动行为：当可聚焦元素被挂载到可滚动容器中且被设置为焦点元素时，浏览器会自动滚动容器，让该焦点元素完整出现在视口范围内，就会导致初始滚动位置不在顶部。
• 结合你使用react-i18next的Trans组件的场景，大概率是Trans组件解析渲染动态内容时，对可交互的a标签默认做了隐式焦点触发，或是动态挂载时a标签刚好是容器内第一个可聚焦元素，被浏览器自动分配了初始焦点。
• 若当前页面URL携带hash片段，浏览器会默认在DOM加载完成后滚动到id/name属性和hash值匹配的元素，如果你渲染的a标签刚好匹配对应属性，也会触发自动滚动。
• 替换为span后问题消失，是因为span属于非交互行内元素，默认不可聚焦，自然不会触发聚焦滚动行为。

可行解决方案 #

• 方案1：拦截a标签的聚焦滚动行为。如果不需要支持Tab键聚焦跳转，可给a标签添加tabIndex="-1"属性，让它不被纳入默认焦点序列；如果需要保留Tab聚焦能力，可在onFocus事件中阻止默认滚动：

// 不需要Tab聚焦场景
<a href={url} tabIndex="-1">{内容}</a>
// 保留Tab聚焦场景
<a href={url} onFocus={(e) => {e.preventDefault()}}>{内容}</a>

• 方案2：容器内容更新后强制重置滚动位置。给外层可滚动div绑定ref，在内容渲染完成后手动将滚动位置重置为顶部：

const containerRef = useRef(null);

// 依赖你渲染用的数组，内容更新时就重置滚动
useEffect(() => {
  if(containerRef.current) {
    containerRef.current.scrollTop = 0;
  }
}, [array])

// 给div绑定ref
<div ref={containerRef} style={{overflow: 'auto'}}>
  {array.map(/* 你的渲染逻辑 */)}
</div>

• 方案3：如果你不需要a标签的原生跳转行为，可保留a标签样式的同时用span/button模拟，点击时手动处理跳转逻辑，从根源避免可聚焦元素带来的滚动问题。

内容的提问来源于stack exchange，提问作者Jose Elmer Macalla