CSS scroll-margin-block-end Property

Description

The scroll-margin-block-end CSS property is used to define the minimum amount of space between the last block-level element and the bottom edge of a scrolling container when scrolling is initiated. This property is particularly useful for creating smoother and more visually appealing scrolling experiences, as it ensures that the content doesn't abruptly reach the container's edge when scrolling. By setting a scroll margin at the block end, designers can control the spacing between content and the container's boundary, enhancing the overall user experience.

Initial value: 0
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollMarginBlockEnd

Syntax

scroll-margin-block-end: <length>

Values

<length>An outset from the block end edge of the scroll container.

Example

HTML

<div id="container">

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

</div>

CSS

#container {
  width: 80%;
  aspect-ratio: 3/1;
  padding: 40px 0;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.blue {
  background-color: lightblue;
  width: 95%;
  aspect-ratio: 3/1;
}

.green {
  background-color: lightgreen;
  width: 80%;
  aspect-ratio: 4/1;
}

.blue, .green {
  margin: 2px;
  scroll-snap-align: end none;
  scroll-margin-block-end: 20px;
}

Result