Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> #container { position: relative; width: 80%; aspect-ratio: 3/1; 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; scroll-margin-bottom: 20px; } </style> </head> <body> <h3>CSS scroll-margin-bottom property.</h3> <p>Scroll-margin-bottom property is set on the child elements, so that snap position on the bottom side is offset by a distance to the container.</p> <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> </body> </html>
