它是向下滚动，因为它最初的工作，我的意思是，就像没有滚动快照选项。为什么?
html代码如下:
<body>
<noscript>~~</noscript>
<div id="background"></div>
<header>
<nav><a href="/"><img src="~~" alt="To Mainpage"></a></nav>
<nav>
<ul>
<li><a href="/">~~</a></li>
<li><a href="/">~~</a></li>
</ul>
</nav>
</header>
<main>
<div id="container">
<section id="first">
<h1>~~</h1>
<article>~~</article>
</section>
<section id="second"></section>
</div>
</main>
</body>
和以下CSS代码:
#container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
#container > section {
height: 100vh;
scroll-snap-align: start;
}
确保给父容器一个高度值，如下例所示。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
width: 100%;
height: 100vh;
flex-flow: column nowrap;
scroll-snap-type: y mandatory;
}
#container > section {
width: 100%;
height: 100%;
scroll-snap-align: start;
flex: none;
}
#first, #third {
background: #ccc;
}
#second, #fourth {
background: red;
}<div id="container">
<section id="first"></section>
<section id="second"></section>
<section id="third"></section>
<section id="fourth"></section>
</div>