Vue 3组合式API中设置DOM元素ScrollLeft属性的问题

问题核心原因 #

你遇到的问题本质是DOM更新的异步性：当修改tracker.value后，Vue不会立即更新DOM，此时容器内容还未完成渲染，scrollWidth可能不是最终值，直接设置scrollLeft会因DOM未就绪无法生效；甚至DOM更新后，滚动位置会被意外重置。

解决方案 #

1. 使用nextTick等待DOM更新完成

Vue的nextTick方法可以确保回调在DOM更新完成后执行，此时容器内容已渲染完毕，设置的滚动位置才能生效：

<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
import type { ProbeRequest } from "@/types/classes/ProbeRequest";
import type { ProbeRequestStatus } from "@/types/classes/ProbeRequestStatus";
import { buildTracker, getScrollPosition } from "./utils";

interface Props {
  probeRequest: null | ProbeRequest;
}

const props = withDefaults(defineProps<Props>(), { probeRequest: null });
const tracker = ref<(ProbeRequestStatus | string)[]>([]);
const trackerContainer = ref();

watch(
  () => props.probeRequest,
  async (probeRequest) => {
    tracker.value = probeRequest ? buildTracker(probeRequest) : [];
    if (tracker.value.length > 0) {
      await nextTick(); // 等待DOM更新完成
      const scrollLeft = getScrollPosition(
        tracker.value,
        trackerContainer.value.scrollWidth
      );
      trackerContainer.value.scrollLeft = scrollLeft;
      console.log(trackerContainer.value.scrollLeft); // 现在会输出预期值
    }
  }
);
</script>

2. 确保容器的CSS滚动样式正确

如果容器未配置正确的滚动样式，即使设置scrollLeft也不会有效果，需添加以下样式：

.tracker-container {
  width: 100%; /* 固定容器宽度 */
  overflow-x: auto; /* 开启水平滚动 */
  white-space: nowrap; /* 阻止子元素换行，保证内容撑宽容器 */
}

同时要确保容器内子元素的总宽度超过容器本身宽度，scrollLeft的设置才会产生实际滚动效果。

3. 可选：监听容器scrollWidth变化（复杂场景适配）

如果buildTracker生成的内容尺寸变化存在延迟，可以额外监听容器的scrollWidth，确保在尺寸稳定后再设置滚动位置：

watch(
  () => trackerContainer.value?.scrollWidth,
  (newWidth) => {
    if (newWidth && tracker.value.length > 0) {
      const scrollLeft = getScrollPosition(tracker.value, newWidth);
      trackerContainer.value.scrollLeft = scrollLeft;
    }
  },
  { immediate: false }
);

内容的提问来源于stack exchange，提问作者Samuel Maddox