React中ref.current.scrollLeft赋值后日志值未变？视觉已生效求解释

这种情况的核心原因是浏览器的DOM布局更新属于异步任务：

当你执行refer.current.scrollLeft += scrollOffset时，只是给DOM元素标记了滚动位置需要更新，但浏览器不会立刻同步修改scrollLeft的属性取值——这个更新操作会被排入浏览器的渲染队列，要等当前JavaScript执行上下文（宏任务）完全结束后，才会进入渲染阶段完成实际的布局更新。

而你的两次console.log是在同一个宏任务里连续执行的，第二次读取scrollLeft时，浏览器还没来得及完成滚动位置的实际更新，所以读到的还是修改前的旧值。等当前宏任务执行完毕，浏览器进入渲染流程后，滚动修改才会生效，这就是你能看到视觉变化但日志没更新的原因。

如果想要在修改后立刻获取到更新后的scrollLeft值，可以把第二次日志输出放到requestAnimationFrame中，它会在浏览器下一次渲染前触发，此时布局更新已经完成：

console.log(refer.current.scrollLeft);
refer.current.scrollLeft += scrollOffset;
requestAnimationFrame(() => {
  console.log(refer.current.scrollLeft);
});

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