使用 React useEffect 在页面加载时滚动到元素中的位置答案

【问题标题】：Scrolling to a position in an element on page load with React useEffect使用 React useEffect 在页面加载时滚动到元素中的位置
【发布时间】：2020-04-30 17:07:06
【问题描述】：

我想在元素被 React 渲染后立即滚动到给定的水平位置。对于上下文，我将 Next.js 与服务器端渲染一起使用，因此 useLayoutEffect 不是一个选项。

export default function WideElement () {
  const ref = useRef(null)

  useEffect(function () {
    ref.current.scrollLeft = 1000
  }, [])

  return (
    <Container ref={ref}>
      ...
    </Container>
  )
}

但是，当页面加载时，上面的代码不会滚动。这里的... 代表一长串水平堆叠并溢出容器的子元素。

我注意到，如果我对滚动施加人为延迟，它似乎工作正常，Container 立即向左滚动 1000 像素。

export default function WideElement () {
  const ref = useRef(null)

  useEffect(function () {
    setTimeout(function() {
      ref.current.scrollLeft = 1000
    }, 1000)
  }, [])

  return (
    <Container ref={ref}>
      ...
    </Container>
  )
}

我想我可能误解了useEffect。我错过了什么，我该如何完成这项工作？

【问题讨论】：

我在沙箱中试过你的代码。 codesandbox.io/s/objective-visvesvaraya-zngjp 。没有setTimeout它工作正常。在这里检查。
2020 和同样的问题在这里。适用于超时。

标签： javascript reactjs scroll react-hooks use-effect

【解决方案1】：

如果您要求 ref 在挂载时可以执行某些操作，则可以使用传递给 ref 属性的回调方法，而不是依赖于超时。回调方法接受节点作为参数，你可以从那里做你想做的事情。

它还让您有机会对任何 ref 更改或安装/卸载做出反应

这应该比超时更可靠。

export default function WideElement () {
  const ref = useRef(null);

  const setRef = useCallback((node) => {
     if (node) {
         node.scrollLeft = 1000;  
     }
     ref.current = node;               
  },[]) 

  return (
    <Container ref={setRef}>
      ...
    </Container>
  )
}

【讨论】：