React Scroll like page turn or scroll certain amount once time

Question

How can I prevents default scrolling and automatically scroll to next item?

For an instance, I have element2 under element1, how can I scroll to element2 position when I scroll down once instead scroll a little bit down.

Or is there any way to scroll down one window/viewport height? Rather than scroll down arbitrary amount.

Answer 1

Use scrollIntoView to make the page scroll to particular element.

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>
  )
}