CSS scroll-padding

The scroll-padding property in CSS is used to specify the padding for the scroll snap area. It allows you to define the space around the snap points when using scroll-snap-align.

Here's how you can use the scroll-padding property in CSS:

Result:
1
2
3
4
5

.scroll-example {
  width: 300px;
  height: 200px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  scroll-snap-align: start;
  margin-right: 10px;
}

In the example above, we have a container with scroll-padding set to 20px. This adds padding around the snap points defined by scroll-snap-align: start.

Play around with the scroll-padding value to see how it affects the space around the snap points when scrolling.