像翻页一样反应滚动或一次滚动一定量

Question

如何防止默认滚动并自动滚动到下一个项目？

对于一个实例，我在element1下有element2，当我向下滚动一次而不是向下滚动一点时，如何滚动到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>
  )
}