Do you know about CSS Scroll-Snap?
🧵👇
🧵👇
1⃣. What is CSS scroll-snap?
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👇
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]
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👇
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.
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👇
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👇
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👇
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👇
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👇
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👇
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👇
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!
link to first thread🔗👇
if you find these threads useful, retweet for more reach!
link to first thread🔗👇
https://twitter.com/ravikmmr/status/1483349572827361282
• • •
Missing some Tweet in this thread? You can try to
force a refresh
