我有一个可滚动的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>
添加新消息时，我试图自动向下滚动。但它不是反应性的。或我不明白反应性如何有效地发挥作用。我也尝试在onMount中分配scrollBoxObj，但是仍然是相同的结果不起作用。
在Svelte中，$: x = y当等式（-y部分）左侧发生变化时，反应性就会增强。
在您的代码中
$: scrollBoxObj = document.getElementById("chat-box");
在左侧，我们有一个字符串（“ chat-box”），它是一个常量，将永远不会改变，还有一个文档也将永远不会改变，这意味着反应性将不会如您所愿。
在使用Svelte document.getElementById（或任何其他选择器方法）时，被认为是不好的做法，因为您直接与DOM进行交互，而DOM应该是状态的反映。简而言之：不要这样做。
Svelte提供了一种简单的方法，只需添加以下内容即可将DOM节点（如div）绑定到变量bind:this={variable}
在您的情况下，它将变为：
<script>
let scrollbox
</script>
<div bind:this={scrollbox}>
...
</div>
该反应的声明（中，如果里面的变化，这是滚动框你的情况块）将执行一旦有事情：
$: if (scrollBoxObj && scrollBoxObj.scrollTop < scrollBoxObj.scrollHeight) {
scrollBoxObj.scrollTop = scrollBoxObj.scrollHeight;
}
请再次注意，这只会在滚动框更改时触发，绑定滚动框后就不会触发（例如，当用户滚动时，它不会执行任何操作），因为您应该使用on:scroll事件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句