W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #container { width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 2px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; } .blue { background-color: lightblue; height: 95%; aspect-ratio: 1/2; } .green { background-color: lightgreen; height: 50%; aspect-ratio: 2/1; } .blue, .green { display: inline-block; margin: 5px; scroll-snap-align: center; } </style> </head> <body> <h1>CSS scroll-snap-type 属性</h1> <p>scroll-snap-type 属性设置在容器元素上，以在 x 轴上生效。</p> <p>在容器框内水平拖动滚动条，然后松开，观察 scroll-snap-align center（滚动吸附对齐中心）的效果。</p> <p>点击一个框，然后使用左右箭头键在蓝色和绿色框之间导航。</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>