CSS - scroll-margin-inline-end
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>
Advertisements
To Continue Learning Please Login
Login with Google