如何获取组件子元素的高度？解决视口触发渲染子元素时的布局跳动问题

嘿，这个布局跳动的问题确实挺影响体验的！核心原因就是你那个监听视口的<div>在子元素渲染前是空的，高度为0，等滚动到的时候突然加载子元素，一下子撑开高度，把下面的内容挤下去了。我给你两个实用的解决方案，你可以根据自己的场景选：

方案一：提前渲染子元素，控制可见性（最简单高效） #

这个方法不需要计算高度，直接让子元素提前渲染，但设置为不可见（保留高度），等进入视口后再切换为可见。这样父<div>一开始就有子元素的高度，不会出现跳动。

修改你的代码如下：

<script lang="ts">
    import type { Snippet } from 'svelte';
    import { viewport } from '$lib/actions/useViewportAction.svelte';

    let { children }: { children: Snippet } = $props();
    let isInViewport = $state(false);

    function handleEnter() {
        console.log('Element entered the viewport');
        isInViewport = true;
    }

    function handleLeave() {
        console.log('Element left the viewport');
        isInViewport = false;
    }
</script>

<div use:viewport={{ onEnter: handleEnter, onLeave: handleLeave }}>
    <!-- 用opacity控制可见性，搭配过渡效果更自然 -->
    <div style="opacity: {isInViewport ? 1 : 0}; transition: opacity 0.3s ease;">
        {@render children()}
    </div>
</div>

• 优点：实现简单，没有复杂的高度计算，布局稳定，还能加过渡动画提升体验
• 缺点：子元素会提前渲染，如果子元素包含大量DOM或者有API请求，可能会提前消耗资源（不过大多数场景下这个影响可以忽略）

方案二：预计算子元素高度，给父容器占位（适合严格延迟渲染的场景） #

如果你一定要等到进入视口才渲染子元素，那可以先在一个隐藏的容器里预渲染子元素，获取它的高度，然后把这个高度设置给监听视口的父<div>，让它提前占好位置。

代码示例：

<script lang="ts">
    import type { Snippet } from 'svelte';
    import { viewport } from '$lib/actions/useViewportAction.svelte';

    let { children }: { children: Snippet } = $props();
    let isInViewport = $state(false);
    let placeholderHeight = $state(0);
    let hiddenPreRenderContainer: HTMLElement;

    // 组件初始化时，获取隐藏容器里子元素的高度
    $effect(() => {
        if (hiddenPreRenderContainer) {
            placeholderHeight = hiddenPreRenderContainer.offsetHeight;
        }
    });

    function handleEnter() {
        console.log('Element entered the viewport');
        isInViewport = true;
    }

    function handleLeave() {
        console.log('Element left the viewport');
        isInViewport = false;
    }
</script>

<!-- 隐藏的预渲染容器：绝对定位移出视口，不影响页面布局但能计算高度 -->
<div 
    bind:this={hiddenPreRenderContainer} 
    style="position: absolute; left: -9999px; top: 0; visibility: hidden;"
>
    {@render children()}
</div>

<!-- 监听视口的容器：未进入视口时用占位高度，进入后自动适应子元素高度 -->
<div 
    use:viewport={{ onEnter: handleEnter, onLeave: handleLeave }} 
    style="height: {isInViewport ? 'auto' : `${placeholderHeight}px`};"
>
    {#if isInViewport}
        {@render children()}
    {/if}
</div>

• 优点：严格延迟渲染子元素，只有进入视口才会在正常位置渲染
• 缺点：需要额外的隐藏容器，若子元素高度是动态的（比如依赖窗口尺寸、异步数据），预计算的高度可能不准确；同时隐藏容器还是会提前渲染子元素，同样有一定资源开销

额外小提示 #

如果你的子元素高度是固定的，那最简单的方法就是直接给监听视口的<div>设置固定高度，不过这种情况比较少见，大多数时候还是上面两种方法更通用。

备注：内容来源于stack exchange，提问作者Christopher Poulsen