<!DOCTYPE html>
<html>
<head>
<style>
#container {
position: relative;
width: 60%;
aspect-ratio: 2/3;
margin: auto;
border: solid black 2px;
}
#topDiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25px;
z-index: 1;
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
#imgDiv {
position: absolute;
inset: 0 0 0 0;
padding-top: 40px;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding-top: 30px;
}
#imgDiv > img {
width: 95%;
margin: 2px;
scroll-snap-align: start none;
}
</style>
</head>
<body>
<h3>CSS scroll-padding-top 属性</h3>
<p>在图片库框内滚动,停止滚动后,观察具有“吸附位置开始”和“scroll-padding-top 30px”的滚动吸附效果。scroll-padding-top 属性值的作用是使图片在行内方向相对于固定的顶部元素向下偏移 30px。</p>
<div id="container">
<div id="topDiv">Fixed top element</div>
<div id="imgDiv">
<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>
</div>
</body>
</html>