React滚动类似翻页或滚动一定量一次

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