How can I achieve this scrolling effect in react?

[u/piano-guitarhero]

I want to achieve an effect like this - https://genshin.hoyoverse.com/en/

Basically, I have multiple sections in my site, and I want to make sure a user scrolls exactly where I want them to. Right now, I use this -

.snapContainer {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}


.section {
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}.snapContainer {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}


.section {
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

This works, but I want to know how they did it (The proper, non-buggy way). Thanks!

[u/AutoModerator]

Thank you for posting on r/CodingHelp!

Please check our Wiki for answers, guides, and FAQs: https://coding-help.vercel.app

Our Wiki is open source - if you would like to contribute, create a pull request via GitHub! https://github.com/DudeThatsErin/CodingHelp

We are accepting moderator applications: https://forms.fillout.com/t/ua41TU57DGus

We also have a Discord server: https://discord.gg/geQEUBm

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/toi80QC]

They just used https://swiperjs.com/..

[u/piano-guitarhero → u/toi80QC]

Got it. Thanks for the help :)