滚动到 sveltekit 中元素的底部

Question

页面加载时如何使元素滚动到底部？

我尝试在 中执行此操作onMount，但该元素未定义。

我正在使用 访问该元素bind:this。

当我尝试让元素稍后滚动时（例如，单击按钮时），它会起作用。

这是我用来使元素滚动到底部的代码（取自svelte repl）：

node.scroll({ top: node.scrollHeight, behavior: 'smooth' });

Answer 1

这工作得很好：

onMount(() => scrollToBottom(element))

REPL

如果保证该元素位于页面上（即不在只会有条件地添加元素（如 ）的内容内#if），则它将被绑定在 中onMount。

REPL 的代码可能不等于您的实际代码？

对于许多 DOM 交互来说，动作更适合。在这种情况下，scrollToBottom对于初始滚动来说已经是合适的操作。它可以扩展为在列表更改时也触发，如下所示：

const scrollToBottom = node => {
    const scroll = () => node.scroll({
        top: node.scrollHeight,
        behavior: 'smooth',
    });
    scroll();

    return { update: scroll }
};

<div use:scrollToBottom={list} ...>

（list作为参数传递以使其成为update触发的依赖项）

REPL