我应该如何将 Svelte Reactivity 与 DOM getElementById 一起使用？答案

【问题标题】：How should I use Svelte Reactivity with DOM getElementById?我应该如何将 Svelte Reactivity 与 DOM getElementById 一起使用？
【发布时间】：2021-05-05 23:22:52
【问题描述】：

我有一个可滚动的 div 元素

    <script>
        let scrollBoxObj;
        $: scrollBoxObj = document.getElementById("chat-box");
        
        $: if (!(scrollBoxObj === undefined) && scrollBoxObj.scrollTop < scrollBoxObj.scrollHeight) {
            scrollBoxObj.scrollTop = scrollBoxObj.scrollHeight;
        }
    </script>
    <div id="scrollBox" class="h-screen w-auto chat-box border border-orange rounded">
        <div id="chat-box" style="margin: 0" class="chat-box">
            {#each chatBox as { user, content, type}}
                <MessageBox {user} message={content} {type} />
            {/each}
        </div>
    </div>

    <style>
        .chat-box {
            overflow-y: auto;
        }
    </style>

我正在尝试在添加新消息时自动向下滚动。但它不是被动的。或者我不明白反应性在 svelte 中是如何工作的。我也尝试在 onMount 中分配 scrollBoxObj，但结果还是一样，没有用。

【问题讨论】：

标签： javascript scroll scrollbar svelte svelte-component

【解决方案1】：

在 Svelte 中，当等式左侧（y-部分）发生变化时，$: x = y 的反应就会启动。

在你的代码中

$: scrollBoxObj = document.getElementById("chat-box");

在左侧，我们有一个字符串 ("chat-box")，它是一个常量，永远不会改变，还有一个 document，它也永远不会改变改变，这意味着反应不会像你期望的那样工作。

当使用document.getElementById（或任何其他选择器方法）使用 Svelte 时，被认为是不好的做法，因为您直接与 DOM 交互，而您的 DOM 应该是您状态的反映。简而言之：不要这样做。

Svelte 为您提供了一种将 DOM 节点（如 div）绑定到变量的简单方法，只需添加 bind:this={variable}

在你的情况下，这将变成：

<script>
 let scrollbox
</script>

<div bind:this={scrollbox}>
 ...
</div>

reactive 声明（if 块）将在其中任何内容发生更改时执行，在您的情况下是滚动框：

$: if (scrollBoxObj && scrollBoxObj.scrollTop < scrollBoxObj.scrollHeight) {
  scrollBoxObj.scrollTop = scrollBoxObj.scrollHeight;
}

请再次注意，这只会在 scrollbox 更改时触发，一旦绑定，您将不会重新触发（例如当用户滚动时，它不会做任何事情），因为您可能应该这样做使用on:scroll 事件。

【讨论】：