Use any one of these codes below as parent, they have different behaviour. Try yourself.
.snappyContainer-mandatory {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}or
.snappyContainer-proximity {
scroll-snap-type: y proximity;
overflow-y: scroll;
height: 100vh;
}and use windows class as child for snappy effect
.windows {
scroll-snap-align: start;
width: 100%;
height: 100vh;
}Note : bg-blues, bg-purple, bg-berry are background colors for different windows.
<div class="snappyContainer-mandatory">
<div class="windows bg-blues"> Your code here </div>
<div class="windows bg-purple"> Your code here </div>
<div class="windows bg-berry"> Your code here </div>
</div>or
<div class="snappyContainer-proximity">
<div class="windows bg-blues"> Your code here </div>
<div class="windows bg-purple"> Your code here </div>
<div class="windows bg-berry"> Your code here </div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent