时间戳

首页 > 解决方案 > 当元素存在时对元素做出反应

javascript - 当元素存在时对元素做出反应

问题描述

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

  1. 超时后滚动到 ref'd 元素
  2. 在要滚动到的元素内创建一个 div，将 ref 传递到该 div 并在 mount 时调用一个函数以滚动到它。
  3. 1和2的组合

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

任何人都有更好的解决方案，它是一致的，并且不会导致滚动前的等待时间超过必要的等待时间？

标签： javascriptreactjsfrontend

解决方案

要将浏览器的焦点放在渲染后的可滚动元素上，您必须考虑几件事。

您应该为您的元素提供一个 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);
}

推荐阅读