CSS - scroll-padding Property

CSS scroll-padding property specifies the amount of space between the edge of the scroll container and the area of an element that snaps into place when the user stops scrolling.

The scroll-padding property is a shorthand for the following CSS properties:

Possible Values

<length-percentage> − Use a valid <length> or <percentage> that indicates an inward offset from the scrollport's edge.
auto − The offset is usually set to 0px by the user agent and is allowed to detect and act otherwise if a non-zero value is more appropriate.

Applies to

All scroll containers.

DOM Syntax

object.style.scrollPadding = "<length-percentage> | auto";

The scroll-padding-* properties set offsets for the optimal viewing area in the scrollport. They help exclude scrollport regions that are hidden by other content, such as fixed-positioned toolbars or sidebars, or create space between a targeted element and the scrollport edges

The following diagram demonstrates the scroll padding structure for reference:

CSS scroll-padding - Zero Value

The following example demonstrates how to use the scroll-padding property to remove any specified scroll padding −

<html>
<head>
<style>
   .scroll-container {
      width: 350px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 350px;
      height: 200px;
      scroll-snap-align: start;
      scroll-padding: 0;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
   }
</style>
</head>
<body>
   <h3>Scroll the content using the scrollbar arrows to see the effect.</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-padding: 0</div>
      <div class="scrolling-section2">scroll-padding: 0</div>
      <div class="scrolling-section3">scroll-padding: 0</div>
   </div>
</body>
</html>

CSS scroll-padding - <length> Value

The following example demonstrates how to use the scroll-padding: 25px property to add 25px padding around scrollable content −

<html>
<head>
<style>
   .scroll-container {
      width: 350px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-padding: 25px;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 350px;
      height: 200px;
      scroll-snap-align: start;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
   }
</style>
</head>
<body>
   <h3>Scroll the content using the scrollbar arrows to see the effect.</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-padding: 25px</div>
      <div class="scrolling-section2">scroll-padding: 25px</div>
      <div class="scrolling-section3">scroll-padding: 25px</div>
   </div>
</body>
</html>

CSS scroll-padding - <percentage> Value

The following example demonstrates that scroll-padding: 20% property adds 20% padding to the top and bottom of the scroll container which affects the scrolling behavior −

<html>
<head>
<style>
   .scroll-container {
      width: 350px;
      height: 200px;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-padding: 20%;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      width: 350px;
      height: 200px;
      scroll-snap-align: start;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(119, 224, 210);
   }
</style>
</head>
<body>
   <h3>Scroll the content using the scrollbar arrows to see the effect.</h3>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-padding: 20%</div>
      <div class="scrolling-section2">scroll-padding: 20%</div>
      <div class="scrolling-section3">scroll-padding: 20%</div>
   </div>
</body>
</html>

CSS scroll-padding - Related Properties

Following is the list of CSS properties of scroll-padding:

property	value
scroll-padding-top	Sets top offset of the scroll snap area of an element.
scroll-padding-bottom	Sets the bottom offset of the scroll snap area of an element.
scroll-padding-left	Sets the left offset of the scroll snap area of an element.
scroll-padding-right	Sets the right offset of the scroll snap area of an element.
scroll-padding-block	Specifies the scroll padding of an element in the block dimension.
scroll-padding-inline	Specifies the scroll padding of an element in the inline dimension..