CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



scroll-padding-left

The scroll-padding-left property is a CSS property that is used to specify the padding of the left side of an element when it is scrolled. This property is used to create a space between the content of an element and the edge of the scrollable area. It is particularly useful when you have a fixed header or footer that you want to keep visible while scrolling through the content of a page.

The scroll-padding-left property is a relatively new addition to CSS, and it is not yet supported by all browsers. However, it is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge.

How to Use the scroll-padding-left Property

The scroll-padding-left property is used to specify the padding of the left side of an element when it is scrolled. The value of this property can be specified in pixels, ems, rems, or percentages. Here is an example of how to use the scroll-padding-left property:

<div style="scroll-padding-left: 20px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
</div>

In this example, the scroll-padding-left property is set to 20 pixels. This means that when the content of the <div> element is scrolled, there will be a 20-pixel space between the content and the left edge of the scrollable area.

Code Examples

Here are some examples of how to use the scroll-padding-left property:

Example 1: Using Pixels

<div style="scroll-padding-left: 50px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
</div>

In this example, the scroll-padding-left property is set to 50 pixels. This means that when the content of the <div> element is scrolled, there will be a 50-pixel space between the content and the left edge of the scrollable area.

Example 2: Using Ems

<div style="scroll-padding-left: 2em;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
</div>

In this example, the scroll-padding-left property is set to 2 ems. This means that when the content of the <div> element is scrolled, there will be a 2-em space between the content and the left edge of the scrollable area.

Example 3: Using Percentages

<div style="scroll-padding-left: 10%;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
  <p>Sed ac elit euismod, ultrices elit vel, ultrices elit. Nulla facilisi. Sed euismod, elit vel ultrices ultrices, elit velit ultrices elit, vel ultrices elit velit vel elit.</p>
</div>

In this example, the scroll-padding-left property is set to 10 percent. This means that when the content of the <div> element is scrolled, there will be a 10-percent space between the content and the left edge of the scrollable area.

Conclusion

The scroll-padding-left property is a useful CSS property that is used to specify the padding of the left side of an element when it is scrolled. This property is particularly useful when you have a fixed header or footer that you want to keep visible while scrolling through the content of a page. Although it is not yet supported by all browsers, it is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge.

References

Activity