Add Scroll Snap with CSS

While people scroll your webpage, you can help snap them to important sections with the scroll-snap-type property on a parent and the scroll-snap-align property on the children. I’ll show you how to get scroll snapping to work both on the X and Y axis, how to disable scroll snap for those with prefers-reduced-motion, and how to padding padding to your scroll behavior.

🔗 Key Links 🔗
- Scroll snap MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
- CSS Tricks article: https://css-tricks.com/practical-css-scroll-snapping/
- Conic.style: https://www.conic.style/
---------------------------------------

🔗 Additional Links 🔗
- Live server for VSCode: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

---------------------------------------

📹 Related/Mentioned Videos 📹
- Emmet for HTML: https://www.youtube.com/watch?v=AGAXv3GjH60

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Introduction
0:30 Setting up the project
2:40 Adding scroll snap

---------------------------------------

🌐 Connect With Me 🌐
- Website: https://www.codinginpublic.dev
- Blog: https://www.chrispennington.blog
- Twitter: https://twitter.com/cpenned

Скачать видео