Получить позицию прокрутки с Reactjs

Я использую реагирование и хочу обработать прокрутку с событием click.

Во-первых, я создал список сообщений с componentDidMount.

Во-вторых, click event в каждом сообщении в списке будет отображать подробности сообщения и прокручивать их вверх (потому что я помещаю подробности сообщения в верхнюю позицию страницы).

В-третьих, нажав "close button" в деталях поста, он вернет предыдущий список постов, но я хочу, чтобы веб-сайт прокручивался точно до позиции кликаемого поста.

Я использую так:

Нажмите на событие, чтобы просмотреть подробности сообщения:

inSingle = (post, e) => {
   this.setState({
        post: post,
        theposition: //How to get it here?
   });
   window.scrollTo(0, 0);
}

Я хочу получить состояние theposition, тогда я могу сделать прокрутку точно до позиции кликаемого сообщения по 'Close event'.

Ответ 1

Это должно работать:

this.setState({
    post: post,
    theposition: window.pageYOffset
});

Ответ 2

Вы можете использовать обработчик событий в реагировать так же, как вы будете использовать в других js framework или библиотеке.

componentDidMount() {
  window.addEventListener('scroll', this.listenToScroll)
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.listenToScroll)
}

listenToScroll = () => {
  const winScroll =
    document.body.scrollTop || document.documentElement.scrollTop

  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight

  const scrolled = winScroll / height

  this.setState({
    theposition: scrolled,
  })
}

Ответ 3

Как это:

theposition: e.y // or, e.pageY

Или же,

theposition: e.clientY - e.currentTarget.getBoundingClientRect().top

Ответ 4

чтобы получить текущую позицию прокрутки вы можете использовать

количество горизонтальной прокрутки window.pageXOffset

количество вертикальной прокрутки window.pageYOffset