CSS scroll-padding-block-end Property

The CSS scroll-padding-block-end property is part of the CSS Scroll Snap Module, which provides a way to control how scrolling is positioned within scroll containers. It allows you to manage the scroll padding for the end of the block axis, ensuring that content is properly aligned when a user scrolls to particular areas. This property is essential for creating a smooth and user-friendly experience when navigating a page.

1. Definition

The scroll-padding-block-end property specifies the minimum space that should be applied at the end of a block container when scrolling by element snap points. This is particularly useful in vertical scrolling scenarios.

2. Syntax

The basic syntax of the scroll-padding-block-end property is as follows:

scroll-padding-block-end: <length> | auto;

3. Value

This property can take the following values:

3.1 length

The length value can be specified in various CSS units, such as pixels (px), ems, rems, percentages (%), etc. This value sets a specific padding space at the end of the block axis.

3.2 auto

The auto value allows the browser to determine how much space should be applied at the end of the block axis, effectively utilizing the default behavior of the scroll container.

4. Default Value

The default value of the scroll-padding-block-end property is 0, meaning no additional space is added at the end of the block axis by default.

5. Property Values

In the example table below, you can see how the different values affect scrolling behavior:

Value	Description
length	Sets a specific amount of padding at the end of the block axis.
auto	Uses the browser’s default behavior for scroll padding.

6. Browser Compatibility

The scroll-padding-block-end property is supported in modern browsers. Below is a compatibility table:

Browser	Support
Chrome	100+
Firefox	63+
Safari	15+
Edge	100+
Internet Explorer	Not Supported

7. Related CSS Properties

Understanding the scroll-padding-block-end property can also help you appreciate other related properties:

7.1 scroll-padding

Sets the scroll padding area for all four sides (top, right, bottom, left) at once.

7.2 scroll-padding-block

Sets the scroll padding area for both the start and end of the block axis.

7.3 scroll-padding-inline

Sets the scroll padding area for both the start and end of the inline axis.

7.4 scroll-padding-top

Specifies the scroll padding at the top of a scroll container.

7.5 scroll-padding-bottom

Specifies the scroll padding at the bottom of a scroll container.

7.6 scroll-padding-start

Specifies the scroll padding at the start of the inline dimension.

7.7 scroll-padding-end

Specifies the scroll padding at the end of the inline dimension.

8. Examples

Here are some practical examples for using the scroll-padding-block-end property:

Example 1: Using length value

div {
    scroll-padding-block-end: 50px;
}

Example 2: Using auto value

div {
    scroll-padding-block-end: auto;
}

FAQ

What is the purpose of the scroll-padding-block-end property?

The scroll-padding-block-end property is used to define the minimum space at the end of the block axis in a scroll container, enhancing the experience when an element is snapped into view.

Can I use this property for horizontal scrolling?

No, scroll-padding-block-end is specifically designed for vertical (block axis) scrolling. For horizontal scrolling adjustments, you would use properties like scroll-padding-inline-end.

What happens if I set it to auto?

Setting the property to auto allows the browser to handle the scroll padding automatically, which might not add any additional space if there are no specific requirements.

Is scroll-padding-block-end supported in all browsers?

Not all browsers support this feature, particularly older versions of Internet Explorer. It’s advisable to check the compatibility before using it in production environments.