Tips & Tricks #25
Can I inspect & visualise CSS scroll snap layout?
Chrome, Edge, Opera
When an HTML element on your page (e.g. this demo page) has
scroll-snap-typeapplied to it, you can see a
scroll-snapbadge next to it in the Elements panel. Click the badge to toggle the display of a scroll-snap overlay on the page.
In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.