运行 ❯
获取您
自有
网站
×
更改方向
保存代码
更改主题,深色/浅色
前往 Spaces
<!DOCTYPE html> <html> <head> <style> #container { width: 60%; aspect-ratio: 3/2; margin: auto; border: solid black 2px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; scroll-padding-inline-end: 20px; } .blue { background-color: lightblue; height: 95%; aspect-ratio: 5/3; } .green { background-color: lightgreen; height: 80%; aspect-ratio: 5/4; } .blue, .green { display: inline-block; margin: 2px; scroll-snap-align: none end; } </style> </head> <body> <h3>CSS scroll-padding-inline-end property.</h3> <p>Scroll-padding-inline-end property is set on the container element, so that snap position on child elements is offset by a distance from the end of the container in the inline direction.</p> <p>In this case, snap position is set to end in the inline direction, so the element in focus should snap into place at the very right of the container. But instead, because of the scroll-padding-inline-end value, the element in focus is offset by 20px distance from the container to the child element.</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>