CSS scroll-margin-block 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 CSS property is used to control the space between the block-level elements and the scrollable container's edges when using scroll operations, such as scrollIntoView() or keyboard scrolling. It allows web developers to create a buffer zone around block-level elements, ensuring that they are not obscured by the container's edges when navigating through content. By defining this margin, designers can enhance user experience by ensuring that key content remains visible and easily accessible during scrolling interactions. This property is particularly useful in situations where precise control over scrolling behavior is required for improved readability and usability.

Initial value
See individual properties
Applies to
all elements
Inherited
no
Computed value
See individual properties
Animatable
by computed value type
JavaScript syntax
object.style.scrollMarginBlock

Interactive Demo

1
2
3
Scroll »

Syntax

scroll-margin-block: <length>{1,2} 

Values

  • <length>An outset from the corresponding 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: start none;
  scroll-margin-block: 10px;
}

Browser Support

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

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

Last updated by CSSPortal on: 3rd January 2024