W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #container { width: 50%; aspect-ratio: 2/3; margin: auto; border: solid black 2px; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; } #container > img { width: 100%; margin: 2px; scroll-snap-align: end; scroll-margin-bottom: 30px; } </style> </head> <body> <h1>CSS scroll-margin-bottom 属性</h1> <p>在图片库框内垂直拖动滚动条，然后松开，观察滚动吸附效果，其中吸附位置设置在末尾，且 scroll-margin-bottom 为 30 像素。</p> <div id="container"> <img src="/i/photo/beijing.jpg" alt="Beijing" width="600" height="400"> <img src="/i/photo/dancer.png" alt="Dancer" width="500" height="749"> <img src="/i/photo/wuhan.jpg" alt="Wuhan" width="600" height="400"> <img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300"> <img src="/i/photo/hangzhou.jpg" alt="Hangzhou" width="600" height="400"> </div> </body> </html>