useRef实现动态元素横向滚动失效：无法滚动至末尾问题求助

你的问题核心是React状态更新后DOM未即时完成渲染，导致调用滚动时新标签还没加入DOM，所以只能滚动到倒数第二个元素的位置。下面给出两种可靠的解决方式：

方法一：用useEffect监听标签数组变化（推荐） #

利用React的useEffect钩子，它会在DOM更新完成后触发。把滚动逻辑放到依赖于标签数组的effect里，确保每次标签更新后，DOM已经就绪再执行滚动：

import { useState, useRef, useEffect } from 'react';

export default function Home() {
  const [tags, setTags] = useState(['标签1', '标签2', '标签3', '标签4', '标签5', '标签6']);
  const tagContainerRef = useRef(null);

  // 标签数组变化时，DOM更新完成后滚动到最右侧
  useEffect(() => {
    if (tagContainerRef.current) {
      tagContainerRef.current.scrollLeft = tagContainerRef.current.scrollWidth;
    }
  }, [tags]);

  const addTag = () => {
    const newTag = `新标签${tags.length + 1}`;
    setTags([...tags, newTag]);
  };

  return (
    <div className="p-8">
      <div 
        ref={tagContainerRef}
        className="flex gap-2 overflow-x-auto pb-2 w-64"
      >
        {tags.map((tag, index) => (
          <div key={index} className="bg-gray-200 px-3 py-1 rounded whitespace-nowrap">
            {tag}
          </div>
        ))}
        <button onClick={addTag} className="bg-blue-500 text-white px-3 py-1 rounded">
          添加标签
        </button>
      </div>
    </div>
  );
}

方法二：用requestAnimationFrame延迟滚动 #

把滚动操作放到浏览器下一次重绘周期执行，确保DOM已经更新完毕：

const addTag = () => {
  const newTag = `新标签${tags.length + 1}`;
  setTags([...tags, newTag]);
  // 等待DOM更新后执行滚动
  requestAnimationFrame(() => {
    if (tagContainerRef.current) {
      tagContainerRef.current.scrollLeft = tagContainerRef.current.scrollWidth;
    }
  });
};

为什么原来的方法失效？ #

React的状态更新是异步批量处理的，调用setTags后，组件不会立刻重新渲染DOM。此时你直接操作tagContainerRef.current，拿到的还是更新前的DOM结构，自然无法滚动到刚添加的新标签位置。

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