我想在每个部分做一些滚动捕捉。 根据文档，容器应该启用 scroll-snap-type，
并且直接子级将被捕捉到。
用下面的代码，怎么不行。但是，如果我将 {scroll-snap-type: y mandatory} 放在 body 上，它就可以工作……除了只有在 chrome 和 safari 上……firefox nightly 似乎有问题。
* {
margin: 0;
}
div {
scroll-snap-type: y mandatory;
}
section {
scroll-snap-align: start;
height: 100vh;
border: 1px solid black;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div>
<section></section>
<section></section>
<section></section>
</div>
</body>
</html>
最佳答案
您需要按照以下代码片段更新 css 更多指南可在 developer.mozilla 上找到.
* {
margin: 0;
}
div {
scroll-snap-type: y mandatory;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
flex-flow: column nowrap;
height: 100vh;
}
section {
scroll-snap-align: start;
height: 100vh;
border: 1px solid black;
background-color: green;
flex: none;
}<div>
<section></section>
<section></section>
<section></section>
</div>关于html - CSS scroll-snap 是如何指定的，它在 firefox 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58109477/