这是来自csstricks.com的两个 CSS 滚动快照示例
- Example #0适用于 Windows 上的 Chrome
- 示例 #3不起作用
为什么其中一个起作用，而另一个不起作用？两者有什么区别？
示例 1：
.container {
flex-basis: 50%;
max-height: 100vh;
overflow-y: scroll;
border: 1px solid gray;
scroll-snap-type: y mandatory;
&.proximity {
scroll-snap-type: y proximity;
}
}
li {
border-bottom: 1px solid white;
padding: 3rem;
font-size: 1.4rem;
color: rgba(white, .5);
background: lightgray;
text-align: center;
scroll-snap-align: start;
display: flex;
flex-flow: column;
justify-content: center;
}
示例 2：
body {
font-family: sans-serif;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
section {
border-bottom: 1px solid white;
padding: 1rem;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
}