Question

我有一个包含不同部分的网站。即，英雄，Section1，Section2，Section3，等等。当鼠标向下滚动时，我想从Hero滚动到开始的下一部分（Section1），并将其捕捉到浏览器的顶部。然后从Section1迅速滚动到Section2，不要像当前功能那样停在各部分的中间。向上滚动时，上一节将捕捉到浏览器顶部。 Fullpage.js可以做到这一点，但我想学习如何使用自定义代码来做到这一点。我们应该怎么做？当下一部分或上一部分进入视口视图时，将其捕捉到浏览器高度的100％。

在我的componentDidMount（）中，我有一个window.scrollTo动作，仅滚动到一个位置。我希望它通过窗口滚动动作滚动到每个部分，并通过向上滚动回到上一部分。

window.addEventListener("scroll", this.scrollToTop);
  scrollToTop = () => {
 window.scrollTo(0, 0);
}

这里是一个例子：


            <div id='hero' ref={this.heroRef} >
                <CopyText />
                <Slideshow />
            </div>
            <div className='section-1' ref={this.section1ref} >
                <CopyText />
                <Slideshow />
            </div>
            <div className='section-2' ref={this.section2ref} >
                <CopyText />
                <Slideshow />
            </div>

如何在React中滚动到网页的下一部分？

0 个答案: