Question

加载时，我的React应用程序旨在滚动到url哈希片段中指定的某个位置。该页面实际上不是在滚动，而是页面上的div。

在第一次访问该页面时（例如，将网址粘贴到地址栏中，然后按Enter。但是在Chrome和Opera上，如果您随后刷新页面，则该页面不会滚动，您将留在页面顶部。在Firefox和Safari上，刷新页面后确实会滚动。

有一个here的密码和框

Answer 1

您可以在文档准备好后尝试滚动：

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>

Answer 2

我认为也许您的componentDidUpdate在QuestionReader组件上的componentDidMount之前运行，如果未呈现视图，则无法滚动到该视图，则需要在componentDidMount上调用this.scrollToElement()。

您还可以使用window.location.hash获取当前的哈希并保存一些props.history.location.pathname.replace(/\//g, "").replace(/\./g, " ");

希望有帮助。

在Chrome上刷新时页面加载滚动失败，但在Firefox上刷新时失败

2 个答案: