CSS scroll-margin-block-end Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

Interactive Demo

1
2
3
Scroll »

Syntax

scroll-margin-block-end: <length>

Values

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

Example

<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>
#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;
}

Browser Support

The following table will show you the current browser support for the CSS scroll-margin-block-end property.

Desktop
Edge Chrome Firefox Opera Safari
7869685615
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
696848151069

Last updated by CSSPortal on: 3rd January 2024