Uploaded October 2019 | Updated September 2026, 2 weeks ago
When we're scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines of code. The fallback even works well in old browsers! Miriam Suzanne shows you how.
Image Gallery Demo: codepen.io/mirisuzanne/pen/bXRebo?editors=0100
Page Sections Demo: codepen.io/mirisuzanne/pen/vomNBg?editors=0100
More on MDN: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
#css #scrollsnap #miriamsuzanne
When we're scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines of code. The fallback even works well in old browsers! Miriam Suzanne shows you how.
Image Gallery Demo: codepen.io/mirisuzanne/pen/bXRebo?editors=0100
Page Sections Demo: codepen.io/mirisuzanne/pen/vomNBg?editors=0100
More on MDN: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
#css #scrollsnap #miriamsuzanne
