长话短说,在 Chrome (81.0.4044.138) 上,滚动捕捉由于某种原因跳过了中间 <div class="item2">
。在 Firefox (76.0.1) 上运行良好。知道为什么吗?
html {
scroll-snap-type: y mandatory;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
}
div {
height: 100vh;
scroll-snap-align: center;
}
.item1 {
background-color: blue;
font-size: 5rem;
}
.item2 {
background-color: yellow;
font-size: 5rem;
}
.item3 {
background-color: red;
font-size: 5rem;
}
<body class="container">
<div class="item1">Hello World</div>
<div class="item2">Hello World</div>
<div class="item3">Hello World</div>
</body>