粘性头部动画无限循环：能否用$derived替代$effect？

问题背景 #

基于yScroll位置的threshold修改粘性头部高度时，若滚动停在阈值附近会触发无限动画循环——头部收缩会降低yScroll值，进而触发头部再次展开，如此往复。通过设置buffer值，仅当越过包含buffer的阈值时触发动画，已解决该问题。

当前代码可正常运行，但无法找到用$derived替代$effect的方法，疑问如下：

• 该问题能否用$derived解决？
• 当前的处理方式是否正确？

现有代码 #

<script lang="ts">
    let yScroll = $state(0);
    let threshold = 50;
    let buffer = 40;
    let isShrunk = $state(false);

    $effect(() => {
        if (yScroll >= threshold + buffer) {
            isShrunk = true;
        } else if (yScroll <= threshold - buffer) {
            isShrunk = false;
        }
    });
</script>

<svelte:window bind:scrollY={yScroll} />

<header class="transition-all duration-500 {isShrunk ? 'h-16' : 'h-32'}">Header</header>

解答 #

1. 当前处理方式的正确性 #

你的处理方式是完全正确的。设置缓冲区（buffer）是解决这类滚动触发动画抖动问题的标准方案：通过扩大触发状态切换的阈值区间，避免头部高度变化导致yScroll微小波动时，频繁触发状态切换，从而彻底消除无限动画循环的问题。

2. 能否用$derived替代$effect？ #

无法直接用$derived替代当前的$effect，原因在于：

• $derived用于定义纯无状态的衍生值——它的结果完全由依赖的状态（这里是yScroll）实时计算得出，没有“记忆”之前状态的能力。
• 你的逻辑中，isShrunk的状态具有“滞后性”：当yScroll处于threshold - buffer到threshold + buffer之间时，isShrunk会保持之前的状态（不会随yScroll的微小波动改变）。这种带状态的滞后切换逻辑，无法通过纯计算的$derived实现，因为同一yScroll值在不同的状态历史下，会对应不同的isShrunk结果，而$derived无法追踪历史状态。

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