Vue3中scrollLeft无法实时更新DOM元素问题求助

云上老周

2026-7-19

问题解决：Vue中scrollLeft无法实时更新的动画阻塞问题

问题分析

你遇到的核心问题是Vue的响应式批量更新机制和定时器与浏览器渲染帧不同步导致的：

Vue会将短时间内的多次数据变化批量收集，等到下一个事件循环周期才统一更新DOM，所以每秒1000次的scrollLeft更新会被合并，只有最后一次值生效。
setInterval(..., 1)的间隔远小于浏览器默认的渲染帧率（约16.6ms/帧），加上错误嵌套nextTick，进一步打乱了DOM更新的时机，导致滚动动画只有在定时器停止后才一次性触发。

解决方案

直接操作DOM元素的scrollLeft属性，配合requestAnimationFrame（与浏览器渲染帧同步）来实现平滑滚动，避开Vue的响应式批量更新限制。

修改后的代码

HTML部分（添加ref用于获取DOM）：

<div class="squares-container" ref="squaresContainer">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    ...
</div>

JavaScript部分：

// 获取容器DOM元素
const container = this.$refs.squaresContainer;
// 初始化滚动位置
container.scrollLeft = 0;

// 定义滚动步骤函数
function scrollStep() {
    // 达到目标位置时停止
    if (container.scrollLeft >= 1000) {
        return;
    }
    // 每次滚动1px
    container.scrollLeft += 1;
    // 在下一渲染帧继续执行
    requestAnimationFrame(scrollStep);
}

// 启动动画
requestAnimationFrame(scrollStep);