页面加载滚动在Chrome上刷新失败，而Firefox没有
页面加载滚动在Chrome上刷新失败，而Firefox没有
提问于 2019-07-16 22:18:17
加载后，我的React应用程序被设计成滚动到url的散列片段中指定的某个位置。页面实际上不是滚动的，而是页面上的一个div。
在第一次访问页面时，这是正确的，例如，当您将url粘贴到地址栏并按enter键时。但是在Chrome和Opera上，如果你随后刷新页面，它就不会滚动，你会被留在页面的顶部。在Firefox和Safari上，当页面被刷新时，它会滚动。
这里有一个代码框，这里
编辑：用于复制的说明
打开码箱后，等待它构建，然后访问Chrome中的这个url。
https://k4pk0.sse.codesandbox.io/#omniscience
从模态对话框中选择“天主教”。页面将滚动到指定的锚点。刷新页面。该页将不会滚动。
使用Firefox重复此操作。刷新后页面将滚动。
回答 2
Stack Overflow用户
发布于 2019-07-26 10:17:44
您可以在文档准备好后尝试滚动：
componentDidUpdate() {
let tag = this.props.location.hash.replace('#', '');
if (tag ) {
let node = ReactDOM.findDOMNode(this.refs[tag ]);
if (node) {
node.scrollIntoView();
}
}
}页中有参考文献
<h4 ref='catholic'>Catholic</h4>Stack Overflow用户
发布于 2019-07-27 01:22:20
我认为您的componentDidUpdate可能在QuestionReader组件上的componentDidMount之前运行，如果您的视图没有呈现，您不能滚动到其中，您需要在componentDidMount上调用this.scrollToElement()。
您还可以使用window.location.hash获取当前哈希，并保存一些props.history.location.pathname.replace(/\//g, "").replace(/\./g, " ");
希望能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57066166
复制相关文章
相似问题
腾讯云开发者
