Svelte中如何让滚动条高度变量仅首次满足条件时赋值

方案一：利用组件挂载事件一次性计算（推荐） #

直接在onMount里获取容器的滚动条高度，组件挂载后容器DOM已存在，且滚动条高度在页面生命周期内基本不会变化，一次计算即可。如果担心初始状态下容器无内容导致滚动条未出现，可以额外监听一次滚动/resize事件，拿到有效值后立即移除监听：

<script>
  import { onMount } from 'svelte';
  let scrollBarHeight = 0;
  let container;

  onMount(() => {
    const calculateScrollBarHeight = () => {
      const height = container.offsetHeight - container.clientHeight;
      if (height > 0) {
        scrollBarHeight = height;
        // 拿到有效值后移除监听，避免后续触发
        container.removeEventListener('scroll', calculateScrollBarHeight);
        window.removeEventListener('resize', calculateScrollBarHeight);
      }
    };

    if (container) {
      // 初始先计算一次
      calculateScrollBarHeight();
      // 防止初始无滚动条，监听滚动和resize事件补全
      container.addEventListener('scroll', calculateScrollBarHeight);
      window.addEventListener('resize', calculateScrollBarHeight);
    }
  });
</script>

<div bind:this={container} class="overflow-x-auto">
  <!-- 你的内容 -->
</div>

方案二：用响应式守卫控制计算时机 #

借助Svelte的响应式语句，加上scrollBarHeight === 0的守卫条件，只有在未获取到有效值时才执行计算，一旦拿到大于0的高度，后续重渲染不会再触发：

<script>
  let container;
  let scrollBarHeight = 0;

  // 仅当容器存在且未获取到有效滚动条高度时计算
  $: if (container && scrollBarHeight === 0) {
    const calculatedHeight = container.offsetHeight - container.clientHeight;
    if (calculatedHeight > 0) {
      scrollBarHeight = calculatedHeight;
    }
  }
</script>

<div bind:this={container} class="overflow-x-auto">
  <!-- 你的内容 -->
</div>

两种方案说明 #

• 方案一完全脱离响应式依赖，仅在挂载阶段执行计算，性能最优，适合确定容器会出现滚动条的场景；
• 方案二用响应式语法实现，代码更简洁，适合需要自动监听初始状态变化的场景，一旦拿到有效值就停止计算。

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