Как перейти к следующему разделу веб-страницы в React? - PullRequest
Новая
       36

Как перейти к следующему разделу веб-страницы в React?

0 голосов
/ 08 апреля 2019

У меня есть сайт с разными разделами.Т.е. Hero, Section1, Section2, Section3 и т. Д. Когда мышь прокручивается вниз, я бы хотел прокрутить героя, с которого он начинается, до следующего раздела (Section1) и привязать его к верхней части браузера.Затем из Раздела 1 прокрутите до Раздела 2 с привязкой, никогда не останавливаясь в середине разделов, как в настоящее время функциональность.При прокрутке вверх предыдущий раздел привязывается к верхней части браузера.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>
...