CSS scroll-margin-bottom

The scroll-margin-bottom property in CSS allows you to adjust the bottom margin of an element when a scroll snap point is triggered. This property is particularly useful when you want to create a scroll snap effect with a margin at the bottom of the scrolling area.

The scroll-margin-bottom property can be applied to any block-level element. You can specify the margin in pixels, percentages, or other length units.

Let's look at an example to see how scroll-margin-bottom works:

Result:

Item 1

Item 2

Item 3

Item 4

In the example above, we have a container with a fixed height and overflow-y: scroll to enable vertical scrolling. Each item within the container has a height of 100px. The scroll-margin-bottom property is set to 20px, creating a bottom margin of 20px when a scroll snap point is triggered.

You can adjust the value of scroll-margin-bottom to achieve the desired spacing between items in a scroll snap container. Experiment with different values to see the effect on the scrolling behavior.