​x
 
<!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>
​