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.
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.
Here are some examples of how to use the scroll-padding-left
property:
<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.
<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.
<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.
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.