Прокрутка до позиции в элементе при загрузке страницы с помощью React useEffect - PullRequest
Новая
       21

Прокрутка до позиции в элементе при загрузке страницы с помощью React useEffect

3 голосов
/ 14 января 2020

Я бы хотел прокрутить до заданной горизонтальной позиции в элементе сразу после того, как он отрендерен React. Для контекста я использую Next. js для рендеринга на стороне сервера, поэтому useLayoutEffect не вариант. 

export default function WideElement () {
  const ref = useRef(null)

  useEffect(function () {
    ref.current.scrollLeft = 1000
  }, [])

  return (
    <Container ref={ref}>
      ...
    </Container>
  )
}

Однако приведенный выше код не прокручивается при загрузке страницы , Здесь ... представляет длинный список дочерних элементов, которые располагаются горизонтально и переполняют контейнер.

Я заметил, что если я наложу искусственную задержку на прокрутку, она, кажется, будет работать нормально, и Container сразу же прокручивается на 1000 пикселей влево. 

export default function WideElement () {
  const ref = useRef(null)

  useEffect(function () {
    setTimeout(function() {
      ref.current.scrollLeft = 1000
    }, 1000)
  }, [])

  return (
    <Container ref={ref}>
      ...
    </Container>
  )
}

Я думаю, что я могу неправильно понять useEffect. Чего мне не хватает, и как я могу заставить это работать?

...