window.scrollTo 在 useEffect 中不起作用 - reactJS

Question

我正在尝试使用 useEffect 函数在第一次渲染时执行 window.scrollTo。我将垂直偏移量作为整数存储在 localStorage 中，但滚动不起作用并保持在位置 0。

不适用于第一页呈现：

useEffect(() => {
  window.scrollTo(0, localStorage.getItem('position'));
}, []);

值得注意的是，如果我将滚动功能放在一个函数中并通过按钮 onClick 调用它，它就会起作用。

如果从 onClick 调用此方法有效：

const setScroll = () => {    
  window.scrollTo(0, localStorage.getItem('position'));
}

我该如何解决？

Answer 1

调用 useEffect 函数时，页面尚未呈现。尝试在下一帧调用 window.scrollTo：

useEffect(() => {
  setTimeout(() => window.scrollTo(0, localStorage.getItem('position')), 0);
}, []);

window.scrollTo not working inside useEffect - reactJS