How is "paged scrolling" implemented?

MDN Learn
#1

Hi. Late Happy New Year to y’all!

My question this time around is about UI design. What is the paged scrolling technique called? The one that’s used in mobile web apps and that has tiny little dots indicating pages.

Could you please point to some simple implementations of it? Can it be done in HTML & CSS only? AFAICT, there isn’t really a property that sets the scrolling to be full-page only. There is scroll-behavior but it’s a completely different thing.

#2

Alright, these two resources introduced me to CSS Scroll Snap Module, which is a CSS-native solution to full-page scrolling.

I didn’t get to try those properties yet but they look very promising.

#3

Hi @KBar

I’m glad you found out about scroll snap. If you haven’t seen it yet, MDN also has some pages about it:

Michael