Jump to section when scrolled just a little bit - React

user_14800896 0
Viewed 687

sorry for the lame title. I'm looking for solution to use on my website in react, that contains a few sections that are 100vh of height. Case: when user scrolls just a little bit the page scrolls to the next or previous section depending on the scroll direction.

Kind of like here

Edit: this is not anchor menu case.

reactjs scroll animation javascript
3 Answers

ok, I will try to help you

window.scrollTo(x, y) - scrolls the page to the specified coordinate relative to the entire document.

user_153150580

Here is a working example using the css scroll-snap feature. It's the best solution for me since you do not need to do much or use any external codes.

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Helvetica', sans-serif;
}

/* All the snapping stuff */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

section {
    height: 100vh;
    scroll-snap-align: center;
}

/* Other styles */
section {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkorchid;
}

section:nth-child(2n) {
    background-color: turquoise;
}

section:nth-child(3n) {
    background-color: tomato;
}
<main class="scroll-container">
    <section>
        <h2>Section 1</h2>
    </section>
    <section>
        <h2>Section 2</h2>
    </section>
    <section>
        <h2>Section 3</h2>
    </section>
    <section>
        <h2>Section 4</h2>
    </section>
</main>

Here is a link to other options that could just work for you: https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/

user_17857290

you can use FullPage js or Swaper js to make single pages with section by section scroll

hope useful :)

user_89523030
Related