Inspect CSS scroll snap | Can I DevTools?

Can I DevTools?

It is like @CanIUse but for the browser devtools, created & curated by @pankajparashar. Get weekly tips & tricks for your favorite browser devtools by subscribing to the newsletter!

Ads via Carbon

CSS

Edit

Inspect CSS scroll snap

Can I inspect & visualize CSS scroll snap layout?

Last Modified

6 months ago

Author

@pankajparashar

Test Live

via BrowserStack

Newsletter

tips-tricks-25

EDGE

Notes

When an HTML element on your page (e.g. this demo page) has scroll-snap-type applied to it, you can see a scroll-snap badge 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.

References (0)