CSS - scroll-margin-block-end

The property scroll-margin-block-end is used to define the margin of the scroll snap area at the end of the block axis (usually the bottom in LTR languages). It specifies the margin between the snapport's bottom edge and the snapport's scroll container box.

This area is computed by taking the border box that has been modified, finding its rectangular bounding box inside the coordinate system of the scroll container, and then adding the given outsets.

Possible Value

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

Applies to

All elements

Syntax

scroll-margin-block-end = <length>

CSS scroll-margin-block-end - Basic Example

The following example demonstrates the usage of scroll-margin-block-end property.

<html>
<head>
<style>
   #demoScroll {
      width: 70%;
      aspect-ratio: 16/9;
      padding: 20px;
      margin: auto;
      border: solid 3px #333;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }
   .snap-block {
      width: 90%;
      aspect-ratio: 16/9;
      scroll-snap-align: start none;
      scroll-margin-block-end: 50px; 
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
   }
   .blue { background-color: #3498db; }
   .green { background-color: #27ae60; }
   .yellow { background-color: #f39c12; }
   .red { background-color: #e74c3c; }
   .purple { background-color: #9b59b6; }
</style>
</head>
<body>
<h3>scroll-margin-block-end</h3>
<p>Scroll through the colorful blocks.</p>
<div id="demoScroll">
   <div class="snap-block blue"></div>
   <div class="snap-block green"></div>
   <div class="snap-block yellow"></div>
   <div class="snap-block red"></div>
   <div class="snap-block purple"></div>
</div>
</body>
</html>
Advertisements