解决 Vue 3 中 scrollLeft 属性更新不同步的动画挑战

本文探讨了在 Vue 3 应用中尝试通过 `scrollLeft` 属性实现平滑滚动动画时，可能遇到的 DOM 更新不同步问题。重点分析了 `scroll-behavior: smooth` CSS 属性如何意外地阻止了 `scrollLeft` 的即时更新，并提供了相应的解决方案和最佳实践，旨在帮助开发者实现可控且流畅的滚动动画。

Vue 3 中 scrollLeft 动画的挑战

在 Vue 3 开发中，我们经常需要通过编程方式控制元素的滚动位置，例如实现轮播图、时间轴滚动或特定区域导航。scrollLeft 是一个常用的 DOM 属性，用于获取或设置元素内容水平滚动的像素数。当尝试通过 Vue 的数据绑定机制，结合 setInterval 或 requestAnimationFrame 来平滑地动画 scrollLeft 时，开发者可能会遇到一个令人困惑的问题：尽管数据属性在更新，但 DOM 元素的实际滚动位置却未能同步更新，或者只在更新停止后才一次性跳到最终位置，表现出“同步阻塞”的假象。

考虑以下场景，我们有一个包含多个方形元素的容器，目标是让它平滑地向右滚动：

在上述代码中，我们尝试通过 :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 像素），浏览器会试图对每一次更新都执行一个平滑动画。然而，由于更新频率过高，浏览器无法在如此短的时间内完成每次动画，导致它可能会：

1. 队列化（Queue） 滚动请求，但由于新请求不断到来，旧请求可能被取消或覆盖。
2. 延迟（Delay） 实际的 DOM 更新，直到一系列请求结束后，或者在动画完成后才更新到最终值。
3. 冲突（Conflict） 与你尝试手动控制的动画逻辑，因为浏览器自身的平滑滚动机制与你的快速、精确的数值设置产生了竞争。

最终结果就是，你看到的数据 currentScrollLeft 确实在递增，但容器的滚动条却没有平滑移动，甚至看起来根本没动，直到 setInterval 结束，它才“跳”到最终位置。

AskAI

无代码AI模型构建器，可以快速微调GPT-3模型，创建聊天机器人

下载

解决方案

最直接的解决方案是 移除或禁用 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 属性。

注意事项与最佳实践

1. 何时使用 scroll-behavior: smooth？

   • 如果你希望用户点击锚点链接或通过浏览器内置的滚动功能（如 window.scrollTo 且不指定 behavior 参数）时，页面能平滑滚动，那么保留 scroll-behavior: smooth 是合适的。
   • 但当你需要精细控制滚动动画（例如，逐帧动画或复杂的缓动效果）时，应避免在目标元素上使用 scroll-behavior: smooth。

2. 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);

3. 使用 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，开发者可以重新获得对滚动动画的完全控制，从而实现流畅、可预测的用户体验。始终根据动画的复杂度和需求，选择最合适的滚动控制策略。