我在哪里将window.scrollTo(0,0)呼叫置于反应组件中？
我试图将它直接放入render并尝试componentDidUpdate(等待所有内容都被渲染),但不知何故滚动条始终保持在同一位置.
- 编辑 -
问题是窗口和身体的CSS高度/溢出.
Chr*_*kes 11
好吧,window.scrollTo(0,0)总是会粘在页面顶部.
你说这个代码应该存在于componentDidMount函数中是正确的,但你需要告诉它在哪里滚动.我会找到你要滚动到的元素的id并获得它的y坐标,而不是你在window.scrollTo中输入它,它应该工作.您可能需要获取组件的高度并将其添加到您获得的此动态值.
就像@Reed Black 在他的回答中提到的那样，问题可能window.scrollTo(0,0)不适用于特定的应用程序。
我在一个开源项目中遇到了这个问题。该应用程序不会像其他网站那样滚动使用window.scrollTo(0,0)。
我必须使用document.querySelector('body').scrollTo(0,0)它才能发挥作用。
window.scrollTo仅当滚动行为设置为 时才有效html。
如果scroll设置了body那么document.querySelector("body").scrollTo(0,0)
如果您overflow: scroll在 DOM 内部的某个容器上进行了设置，则需要访问该容器。分配一个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>
这将完美地工作。
我用 React 尝试了在这个问题上找到的所有方法，唯一对我有用的是下面代码中看到的“scrollIntoView”；
document.getElementById('element')?.scrollIntoView({ behavior: 'smooth' });
另一种情况可能是应用程序未设置为让窗口处理其滚动。它可能是一个“小部件”，其中窗口是静态的，内部元素处理滚动。测试这一点的一个好方法是window.scrollTo(0,0)直接在控制台中输入。如果您的窗口没有弹出到顶部，则需要寻求其他解决方案。您可能需要获取正在执行实际滚动的元素并使用Element.scrollTo(0,0)
| 归档时间： |
|
| 查看次数： |
24120 次 |
| 最近记录： |