Thread by @ravikmmr

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👇

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!

link to first thread🔗👇