0

我试图滚动到反应应用程序中的某个元素，一个位于页面末尾的空 div。我试图通过使用 Ref 来跟踪 div 并在 useEffect() 中调用 div 上的 scrollTo 来实现这一点。不幸的是，它没有滚动到正确的位置——它应该在页面的底部结束，但它只是向下部分结束。

我怀疑为什么会出现这种情况 - 进行 API 调用以接收数据并填充列表，我认为它正在滚动到填充列表之前的点，从而使页面更大。我没有得到的是，我已将滚动代码放在第二个参数是列表状态的 useEffect 中，因此这应该在填充列表后运行。我也尝试用 useLayoutEffect 替换 useEffect 但无济于事。我唯一能想到的是将滚动代码放入计时器中，但这似乎很糟糕。我错过了什么吗？

简化示例

const [messages, setMessages] = React.useState<string[]>([])
const endOfPageRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    apiCall().then(result => setMessages(result))
}, []);

useEffect(() => {
    endOfPageRef.current?.scrollTo();
}, [messages])

return(
    <div className="root">
        <MessageList messages={messages}></MessageList>
        <div ref={endOfPageRef}></div>
    </div>
);

如前所述，这最终会在屏幕下方滚动大约四分之一，而不是所需的行为到底部。

4

0 回答 0