Реагировать Прокрутите как переворачивание страницы или прокрутите определенное количество раз

Question

Как я могу предотвратить прокрутку по умолчанию и автоматически прокручивать к следующему элементу?

Например, у меня есть element2 под element1, как я могу прокрутить до позиции element2, когда я прокручиваю вниз один раз вместо прокрутки немного вниз.

Или есть способ прокрутить вниз на одно окно / на высоту окна просмотра?Вместо того, чтобы прокрутить вниз произвольную сумму.

Answer 1

Используйте scrollIntoView, чтобы прокрутить страницу до определенного элемента.

componentDidMount(){ 
   window.addEventListener('scroll',()=> {
            if (this.state.scroll) {
               document.getElementById("element").scrollIntoView({behavior: "smooth"})
            }
        })
     } 
handleClick(){
  document.getElementById("element").scrollIntoView(true)
}
render(){
  return (
     <div>
       <element1 onClick={this.handleClick.bind(this)}></element1>
       <element2 id="element"></element2>
     </div>
  )
}