Question

我试图导航到页面后滚动到长列表中的元素，但是该元素不会立即呈现，因此起初没有任何内容可滚动到。我尝试了三种结果不一致或缓慢的方法：

在超时后滚动到ref'd元素
在元素内创建一个div来滚动引用，而ref和一个在安装时调用的函数滚动到该元素。
1和2的组合

我曾经考虑过对元素的存在进行某种轮询，但是由于某种原因，这感觉有点脏。

任何人都有一个更好的解决方案，该解决方案可以保持一致，并且不会导致滚动之前的等待时间长于必要的时间？

Answer 1

要在呈现后将浏览器的焦点放在可滚动元素上，您只需考虑几件事。

您应该为元素赋予tabindex属性，并且必须将其设置为“ -1”，如下所示。

<div tabIndex="-1">
     Your content.
</div>

使用React“ ref”，而不是查询DOM。

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

render() {
  return (
    <div
      tabIndex="-1"
      ref={this.myRef} >
      Your content.
    </div>
  );
}

将重点放在componentDidMount生命周期功能上。

componentDidMount() {
  window.scrollTo(0, this.myRef.current.offsetTop);
}

Answer 2

React具有一个“ componentDidMount”生命周期方法，可用于启动自动滚动。您需要获取目标元素的垂直位置，然后将页面滚动那么多。

当元素存在时反应滚动到元素

2 个答案: