реагировать на прокрутку элемента, когда элемент существует

Question

Я пытаюсь прокрутить элемент в длинном списке после перехода на страницу, однако элемент не отображается сразу, поэтому сначала нечего прокручивать. Я пробовал три подхода с непоследовательными или медленными результатами:

1. прокрутка до элемента ref'd после тайм-аута
2. создание элемента div внутри элемента для прокрутки, которому передаетсяref и функция вызывается при монтировании для прокрутки к нему.
3. комбинация 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, который можно использовать для запуска автоматической прокрутки. Вам нужно получить вертикальное положение целевого элемента, а затем прокрутить страницу на столько.