1. It is a CSS property that helps you to make your page more accessible to all devices.
2. Helps you to make more user-friendly websites
Example👇
2⃣. How to Implement
1. To use scroll snap on a container, its child items should be displayed inline.
2. We can use the flexbox property for that.
3. Define the scroll-snap type.
Syntax :
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity]
3⃣. Scroll-snap type
Directions: We can give the directions for scrolling
1. scroll-snap-type-x: this will create the scrolling bar in the horizontal directions.
2. scroll-snap-type-y: this will create the scrolling bar in the vertical directions.
Example👇
4⃣ Scroll-snap type
1. Strictness: we can control the strictness of the scroll bar and the values to control scroll bare are:
mandatory | proximity
2. strictness helps to control the effectiveness of the scroll bar where sometimes scrolling doesn't happen.
5⃣ Scroll-snap-type: mandatory
mandatory is a strictness value that tells the browser to always go to a snap position when there isn’t scrolling happening.
Example👇
6⃣ Scroll-snap-type: Proximity
Proximity is a strictness value that tells the browser to go to a snap position if a scrolling action gets pretty close to a snap position.
If it’s not pretty close, then the browser shouldn’t snap and scrolling will behave normally.
Example👇
7⃣ Scroll Snapping Alignment
The child items of the scrolling container need an alignment point that they can snap to. We can use start, centre or end.
Example👇
8⃣ Scroll-Snap-Stop
Sometimes, we might need to prevent the user from accidentally bypassing some important items while scrolling. If the user scrolls too quickly, it is possible to skip some items.
Example👇
9⃣ Scroll Snap Padding
The scroll-padding shorthand property sets scroll padding on all sides, similar to how the padding property works.
Example👇
🔟Scroll Snap Margin
The scroll-margin shorthand property sets the spacing between the child items of a scrolling container. When a margin is added to an element, the scrolling will snap as per the margin.
Example👇
1⃣1⃣ Bonus💡
Use Cases For CSS Scroll Snap
1. Images List
2. Friends List
3. Avatars List
4. Full Height Sections
Example👇
Thanks for reading the whole thread♥️
if you find these threads useful, retweet for more reach!
some of the best list of courses that helps you to get started in the world of front-end development.
many people DM me where to start so these are courses for them who want to start or brush up their skills!!
01. The Complete 2021 Web Development Bootcamp
this course is created by @yu_angela, This course gives you a brief intro about the web development world, she discusses the full stack development this is the best course to get started
One of the biggest learning platforms in the world it has very good web development courses available and also you can learn new things from these courses.