Question

我在哪里将window.scrollTo(0,0)调用放在反应组件中？

我尝试将其直接放入render并尝试componentDidUpdate（等待所有内容都呈现），但不知何故滚动条始终保持在同一位置。

- 编辑 -

问题是窗口和身体的CSS高度/溢出。

请参阅：https://stackoverflow.com/a/18573599/1016383

Answer 1

好吧，window.scrollTo（0,0）总是会粘在页面顶部。

你说这个代码应该存在于componentDidMount函数中是正确的，但你需要告诉它在哪里滚动。我会找到你要滚动到的元素的id并获得它的y坐标，而不是你在window.scrollTo中输入它，它应该工作。您可能需要获取组件的高度并将其添加到您获得的此动态值。

Answer 2

另一种情况是应用程序未设置为让窗口处理其滚动。它可能是一个“小部件”，其中的窗口是静态的，内部元素负责滚动。一个很好的测试方法是在控制台中直接输入window.scrollTo(0,0)。如果您的窗口没有弹出到顶部，则需要寻找其他解决方案。您可能需要获取进行实际滚动的元素，并使用Element.scrollTo(0,0)

进行处理

Answer 3

window.scrollTo仅在html中设置滚动行为时有效。
如果在scroll上设置了body，则document.querySelector("body").scrollTo(0,0)

如果您在DOM内部的某个容器上设置了overflow: scroll，则需要对其进行访问。为此分配一个id。例如，我在div下面有一个为其设置了overflow: scroll的容器。

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="root">
      <div id="scroller">
        <!-- other content -->
      </div>
    </div>    
  </body>
</html>

然后，要进行滚动行为，您需要查询scroller。

const scrollToTop = () => {
  document.getElementById("scroller").scroll(0,0)
}

<button onClick={scrollToTop}>Scroll to Top</button>

这将完美地工作。

Answer 4

就像@Reed Black在他的回答中提到的那样，问题可能是window.scrollTo(0,0)对特定应用程序不起作用。

我在一个开源项目中遇到了这个问题。该应用程序不会像其他网站那样使用window.scrollTo(0,0)滚动。

我必须使用document.querySelector('body').scrollTo(0,0)使其起作用。

window.scrollTo（）在反应组件中？

4 个答案: