CSS - scroll-margin-inline-end

Quiz

The property scroll-margin-inline-end helps to snap this box to the snapport by defining the margin for the scroll snap region at the end of the horizontal dimension.

To get this area, take the modified border box, find its rectangular bounding box in the coordinate system of the scroll container, and add the required outsets.

Possible Value

<length> - An outset from the corresponding edge of the scroll container.

Applies to

All elements

Syntax

scroll-margin-inline-end = <length>

CSS scroll-margin-inline-end - Basic Example

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

<html>
<head>
<style>
#demoScroll {
   width: 60%;
   aspect-ratio: 16/9;
   padding: 20px;
   margin: auto;
   border: solid 3px #333;
   overflow-x: auto; 
   overflow-y: hidden;
   white-space: nowrap;
}
.snap-block {
   width: 104%; 
   height: 90%;
   scroll-snap-align: start;
   scroll-margin-inline-end: 150px; 
   border-radius: 10px;
   background-color: #3498db; 
   display: inline-block;
}
.color-block:nth-child(2n) {
   background-color: #27ae60; 
}
.color-block:nth-child(3n) {
   background-color: #f39c12; 
}
.color-block:nth-child(4n) {
   background-color: #e74c3c; 
}
.color-block:nth-child(5n) {
   background-color: #9b59b6;
}
</style>
</head>
<body>
<h3>scroll-margin-inline-end</h3>
<p>Scroll through the horizontally scrollable blocks.</p>
<div id="demoScroll">
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
   <div class="snap-block"></div>
</div>
</body>
</html>

Print Page