My webpage has scroll snapping enabled, which works well on Mac but not on certain devices (especially Windows), where it behaves like a regular scroll. This makes it difficult for visitors to read the content as they have to manually figure out where each section is located since scroll snapping is not functioning.
What would be a more user-friendly solution to address this issue?
.rightside {
overflow-y: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
}
.snap1 {
scroll-snap-align: start;
height: 100vh;
position: relative;
}
.snap2 {
scroll-snap-align: start;
height: 100vh;
margin-top: 100vh;
position: relative;
}
.snap3 {
scroll-snap-align: start;
height: 100vh;
margin-top: 200vh;
}
.snap4 {
scroll-snap-align: start;
height: 100vh;
margin-top: 300vh;
}
.snap5 {
scroll-snap-align: start;
height: 100vh;
margin-top: 400vh;
}<div class="rightside">
<div class="snap1">
Page 1 : Hello world
</div>
<div class="snap2">
Page 2 : Hello world
</div>
<div class="snap3">
Page 3 : Hello world
</div>
<div class="snap4">
Page 4 : Hello world
</div>
<div class="snap5">
Page 5 : Hello world
</div>
</div>