解决Vue 3中scrollLeft属性DOM更新滞后：深入理解与平滑滚动实践

<template>
  <div class="squares-container" ref="squaresContainer">
    <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 squaresContainer = ref(null);
    let currentScrollLeft = 0;
    let intervalId = null;

    const startScroll = () => {
      if (!squaresContainer.value) return;

      currentScrollLeft = 0; // 重置滚动位置
      clearInterval(intervalId); // 清除之前的定时器

      intervalId = setInterval(() => {
        if (currentScrollLeft >= 1000) {
          clearInterval(intervalId);
          intervalId = null;
          return;
        }

        // 尝试更新scrollLeft
        squaresContainer.value.scrollLeft = currentScrollLeft;
        currentScrollLeft += 1;
        // 注意：这里尝试使用nextTick，但对于此问题通常无效
        // nextTick(() => {
        //   squaresContainer.value.scrollLeft = currentScrollLeft;
        // });
      }, 1); // 极短的间隔
    };

    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return {
      squaresContainer,
      startScroll
    };
  }
};
</script>

<style scoped>
.squares-container {
  width: 300px;
  height: 100px;
  overflow-x: scroll;
  white-space: nowrap;
  border: 1px solid #ccc;
}
.square {
  display: inline-block;
  width: 90px;
  height: 90px;
  margin: 5px;
  background-color: lightblue;
  border: 1px solid blue;
}
</style>

/* 可能导致问题的CSS样式 */
.squares-container {
  /* ... 其他样式 ... */
  scroll-behavior: smooth !important; /* <-- 移除或禁用此行 */
}

/* 修正后的CSS样式 */
.squares-container {
  width: 300px;
  height: 100px;
  overflow-x: scroll;
  white-space: nowrap;
  border: 1px solid #ccc;
  /* scroll-behavior: smooth; <-- 移除或注释掉 */
}

<template>
  <div class="squares-container" ref="squaresContainer">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <!-- 更多 .square 元素 -->
  </div>
  <button @click="scrollToPosition(500)">滚动到 500px</button>
  <button @click="scrollToElement(3)">滚动到第三个方块</button>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const squaresContainer = ref(null);

    // 确保CSS中包含 scroll-behavior: smooth
    onMounted(() => {
      if (squaresContainer.value) {
        squaresContainer.value.style.scrollBehavior = 'smooth';
      }
    });

    const scrollToPosition = (position) => {
      if (squaresContainer.value) {
        // 使用 scrollTo 方法，并指定 behavior: 'smooth'
        squaresContainer.value.scrollTo({
          left: position,
          behavior: 'smooth'
        });
      }
    };

    const scrollToElement = (index) => {
      if (squaresContainer.value) {
        const targetSquare = squaresContainer.value.children[index - 1]; // 获取目标方块
        if (targetSquare) {
          targetSquare.scrollIntoView({
            behavior: 'smooth',
            inline: 'start' // 水平滚动到起始位置
          });
        }
      }
    };

    return {
      squaresContainer,
      scrollToPosition,
      scrollToElement
    };
  }
};
</script>

<style scoped>
.squares-container {
  width: 300px;
  height: 100px;
  overflow-x: scroll;
  white-space: nowrap;
  border: 1px solid #ccc;
  /* 此时可以放心地使用 scroll-behavior: smooth */
  /* 或者在JS中动态设置 */
}
/* .square 样式同上 */
</style>

<template>
  <div class="squares-container" ref="squaresContainer">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <!-- 更多 .square 元素 -->
  </div>
  <button @click="startCustomSmoothScroll(500)">自定义平滑滚动到 500px</button>
</template>

<script>
import { ref, onUnmounted } from 'vue';

export default {
  setup() {
    const squaresContainer = ref(null);
    let animationFrameId = null;

    const startCustomSmoothScroll = (targetScrollLeft) => {
      if (!squaresContainer.value) return;

      cancelAnimationFrame(animationFrameId); // 取消之前的动画

      const start = squaresContainer.value.scrollLeft;
      const change = targetScrollLeft - start;
      const duration = 500; // 动画持续时间 (ms)
      let startTime = null;

      const animateScroll = (currentTime) => {
        if (!startTime) startTime = currentTime;
        const progress = (currentTime - startTime) / duration;

        if (progress < 1) {
          // 使用缓动函数，例如 easeInOutQuad
          const easedProgress = progress < 0.5
            ? 2 * progress * progress
            : -1 + (4 - 2 * progress) * progress;
          squaresContainer.value.scrollLeft = start + change * easedProgress;
          animationFrameId = requestAnimationFrame(animateScroll);
        } else {
          // 动画结束，确保设置最终位置
          squaresContainer.value.scrollLeft = targetScrollLeft;
          animationFrameId = null;
        }
      };

      animationFrameId = requestAnimationFrame(animateScroll);
    };

    onUnmounted(() => {
      cancelAnimationFrame(animationFrameId);
    });

    return {
      squaresContainer,
      startCustomSmoothScroll
    };
  }
};
</script>

<style scoped>
.squares-container {
  width: 300px;
  height: 100px;
  overflow-x: scroll;
  white-space: nowrap;
  border: 1px solid #ccc;
  /* 确保这里没有 scroll-behavior: smooth */
}
/* .square 样式同上 */
</style>