本文探讨了在 vue 3 应用中尝试通过 `scrollLeft` 属性实现平滑滚动动画时，可能遇到的 dom 更新不同步问题。重点分析了 `scroll-behavior: smooth` css 属性如何意外地阻止了 `scrollLeft` 的即时更新，并提供了相应的解决方案和最佳实践，旨在帮助开发者实现可控且流畅的滚动动画。
Vue 3 中 scrollLeft 动画的挑战
在 Vue 3 开发中，我们经常需要通过编程方式控制元素的滚动位置，例如实现轮播图、时间轴滚动或特定区域导航。scrollLeft 是一个常用的 DOM 属性，用于获取或设置元素内容水平滚动的像素数。当尝试通过 Vue 的数据绑定机制，结合 setInterval 或 requestAnimationFrame 来平滑地动画 scrollLeft 时，开发者可能会遇到一个令人困惑的问题：尽管数据属性在更新，但 DOM 元素的实际滚动位置却未能同步更新，或者只在更新停止后才一次性跳到最终位置，表现出“同步阻塞”的假象。
考虑以下场景，我们有一个包含多个方形元素的容器，目标是让它平滑地向右滚动：
<template> <div class="squares-container" :style="{ scrollLeft: currentScrollLeft + 'px' }"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <!-- 更多 square 元素 --> </div> <button @click="startScroll">开始滚动</button> </template> <script> import { ref, onMounted, onUnmounted } from 'vue'; export default { setup() { const currentScrollLeft = ref(0); let intervalId = null; const startScroll = () => { // 清除之前的定时器，防止重复启动 if (intervalId) { clearInterval(intervalId); } currentScrollLeft.value = 0; // 重置滚动位置 intervalId = setInterval(() => { if (currentScrollLeft.value >= 1000) { clearInterval(intervalId); intervalId = null; return; } // 每次递增 1 像素，尝试实现平滑滚动 currentScrollLeft.value += 1; }, 1); // 极短的间隔，模拟连续更新 }; onUnmounted(() => { if (intervalId) { clearInterval(intervalId); } }); return { currentScrollLeft, startScroll, }; }, }; </script> <style scoped> .squares-container { width: 300px; height: 100px; overflow-x: scroll; white-space: nowrap; border: 1px solid #ccc; /* 初始问题通常出现在这里 */ /* scroll-behavior: smooth; */ } .square { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px; flex-shrink: 0; } </style>
在上述代码中，我们尝试通过 :style=”{ scrollLeft: currentScrollLeft + ‘px’ }” 绑定 scrollLeft 属性。然而，这种直接绑定 scrollLeft 到 style 属性的方式并不总是能有效控制元素的实际滚动位置。scrollLeft 是一个 DOM 属性，通常需要直接通过 javaScript 访问元素实例来设置，例如 element.scrollLeft = value。更常见且推荐的做法是使用 ref 获取 DOM 元素，然后直接操作其 scrollLeft 属性。
立即学习“前端免费学习笔记（深入）”；
即使我们通过 ref 获取元素并直接设置 element.scrollLeft = value，也可能遇到同样的问题。
问题的根源：scroll-behavior: smooth
经过深入排查，此类问题通常是由 CSS 属性 scroll-behavior: smooth 引起的。当在滚动容器上设置了 scroll-behavior: smooth 时，浏览器会接管所有（包括用户操作和 javascript 编程）滚动行为，并尝试以平滑动画的方式完成滚动。
这意味着，如果你在短时间内频繁地通过 JavaScript 更新 scrollLeft 属性（例如，在一个 setInterval 循环中每隔 1 毫秒递增 1 像素），浏览器会试图对每一次更新都执行一个平滑动画。然而，由于更新频率过高，浏览器无法在如此短的时间内完成每次动画，导致它可能会：
- 队列化（Queue） 滚动请求，但由于新请求不断到来，旧请求可能被取消或覆盖。
- 延迟（Delay） 实际的 DOM 更新，直到一系列请求结束后，或者在动画完成后才更新到最终值。
- 冲突（Conflict） 与你尝试手动控制的动画逻辑，因为浏览器自身的平滑滚动机制与你的快速、精确的数值设置产生了竞争。
最终结果就是，你看到的数据 currentScrollLeft 确实在递增，但容器的滚动条却没有平滑移动，甚至看起来根本没动，直到 setInterval 结束，它才“跳”到最终位置。
解决方案
最直接的解决方案是 移除或禁用 scroll-behavior: smooth。
.squares-container { /* ... 其他样式 ... */ /* 移除或注释掉这一行 */ /* scroll-behavior: smooth; */ scroll-behavior: auto; /* 显式设置为默认值，即瞬间滚动 */ }
一旦 scroll-behavior: smooth 被移除，浏览器将不再干预 scrollLeft 的编程设置。每次 element.scrollLeft = value 的操作都将立即生效，从而允许你通过 setInterval 或 requestAnimationFrame 实现完全自定义的平滑滚动动画。
优化后的代码示例（使用 ref 直接操作 DOM）
为了更精确地控制滚动，推荐使用 Vue 的 ref 来获取 DOM 元素，并直接操作其 scrollLeft 属性。
<template> <div class="squares-container" ref="squaresContainerRef"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <!-- 更多 square 元素 --> </div> <button @click="startScroll">开始滚动</button> </template> <script> import { ref, onMounted, onUnmounted, nextTick } from 'vue'; export default { setup() { const squaresContainerRef = ref(null); let intervalId = null; let currentScrollValue = 0; // 用于内部追踪滚动值 const startScroll = () => { if (intervalId) { clearInterval(intervalId); } currentScrollValue = 0; // 重置滚动位置 // 确保 DOM 元素存在 nextTick(() => { if (squaresContainerRef.value) { squaresContainerRef.value.scrollLeft = currentScrollValue; // 初始设置 } }); intervalId = setInterval(() => { if (!squaresContainerRef.value) return; if (currentScrollValue >= 1000) { clearInterval(intervalId); intervalId = null; return; } currentScrollValue += 1; squaresContainerRef.value.scrollLeft = currentScrollValue; }, 1); // 极短的间隔，模拟连续更新 }; onUnmounted(() => { if (intervalId) { clearInterval(intervalId); } }); return { squaresContainerRef, startScroll, }; }, }; </script> <style scoped> .squares-container { width: 300px; height: 100px; overflow-x: scroll; white-space: nowrap; border: 1px solid #ccc; /* 确保这里没有 scroll-behavior: smooth; */ scroll-behavior: auto; /* 显式设置为默认值 */ } .square { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px; flex-shrink: 0; } </style>
注意事项与最佳实践
-
何时使用 scroll-behavior: smooth？
- 如果你希望用户点击锚点链接或通过浏览器内置的滚动功能（如 window.scrollTo 且不指定 behavior 参数）时，页面能平滑滚动，那么保留 scroll-behavior: smooth 是合适的。
- 但当你需要精细控制滚动动画（例如，逐帧动画或复杂的缓动效果）时，应避免在目标元素上使用 scroll-behavior: smooth。
-
JavaScript 原生平滑滚动
- 如果你的目标是实现一个简单的平滑滚动到某个位置，并且不需要自定义缓动函数，可以直接使用 element.scrollTo({ left: targetScrollLeft, behavior: ‘smooth’ })。这种方法会利用浏览器内置的平滑滚动功能，且不会与 scroll-behavior: smooth 属性冲突（实际上，behavior: ‘smooth’ 会覆盖 scroll-behavior: auto 的设置）。
const smoothScrollTo = (targetScrollLeft) => { if (squaresContainerRef.value) { squaresContainerRef.value.scrollTo({ left: targetScrollLeft, behavior: 'smooth' }); } }; // 调用示例：smoothScrollTo(1000); -
使用 requestAnimationFrame 进行复杂动画
- 对于更复杂的、需要自定义缓动曲线或暂停/恢复功能的动画，推荐使用 requestAnimationFrame 代替 setInterval。requestAnimationFrame 会在浏览器下一次重绘之前执行回调，确保动画与浏览器帧率同步，避免丢帧和卡顿，提供更流畅的用户体验。
import { ref, onUnmounted } from 'vue'; export default { setup() { const squaresContainerRef = ref(null); let animationFrameId = null; let startTimestamp = null; const duration = 1000; // 动画持续时间（毫秒） const startScrollLeft = 0; const targetScrollLeft = 1000; const animateScroll = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const elapsed = timestamp - startTimestamp; const progress = Math.min(elapsed / duration, 1); // 可以添加自定义缓动函数，例如 ease-out const easedProgress = progress; // 线性，可以替换为缓动函数 if (squaresContainerRef.value) { squaresContainerRef.value.scrollLeft = startScrollLeft + (targetScrollLeft - startScrollLeft) * easedProgress; } if (progress < 1) { animationFrameId = requestAnimationFrame(animateScroll); } else { startTimestamp = null; // 重置 } }; const startSmoothAnimation = () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId); } startTimestamp = null; // 确保每次动画都重新开始计时 animationFrameId = requestAnimationFrame(animateScroll); }; onUnmounted(() => { if (animationFrameId) { cancelAnimationFrame(animationFrameId); } }); return { squaresContainerRef, startSmoothAnimation, }; }, };
总结
在 Vue 3 中实现 scrollLeft 动画时，遇到 DOM 更新不同步的问题，往往是由于 CSS 属性 scroll-behavior: smooth 在作祟。理解其工作原理，即它会接管和管理所有滚动行为，是解决问题的关键。通过移除或禁用此 CSS 属性，并结合 ref 直接操作 DOM 元素的 scrollLeft 属性，或利用 element.scrollTo({ behavior: ‘smooth’ })，甚至更高级的 requestAnimationFrame，开发者可以重新获得对滚动动画的完全控制，从而实现流畅、可预测的用户体验。始终根据动画的复杂度和需求，选择最合适的滚动控制策略。