长话短说,在 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>
最佳答案
实际上,chrome 浏览器中存在一个关于它的错误(其背后的原因直到现在还不清楚,所以没有人知道为什么)。所以你不能申请 scroll-snap-type
给您的 html
(同时将其应用于 body
也不起作用)直接标记。所以代替它,为了让它工作,你应该创建另一个 div
并将您的元素包裹在其中。
所以试试这个:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
scroll-snap-type: y mandatory;
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>
<div class="container">
<div class="item1">Hello World</div>
<div class="item2">Hello World</div>
<div class="item3">Hello World</div>
</div>
</body>
注意:在 CSS-tricks 中遇到同样的问题.
关于html - 滚动捕捉 CSS 跳过元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61726927/