我尝试使用滚动捕捉功能，但它不起作用。我很困惑——我做错了什么？？
HTML:
<!doctype html>
<html>
<body>
<div class="section" style="background-color: peachpuff">
<h2>Headline</h2>
<p>My Text</p>
</div>
<div class="section">
<h2>another Headline</h2>
<p>Another line of text</p>
</div>
<div class="section" style="background-color: peachpuff">
<h2>next Headline</h2>
<p>Text line - lorem ipsum and stuff</p>
</div>
<div class="section">
<h1>THE END OF THE SCROLL</h1>
</div>
</body>
</html>
CSS：
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
width: 80%;
margin: auto;
scroll-snap-type: y mandatory;
}
h1, h2{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif;
}
.section{
display: flex;
flex-direction: column;
width:100%;
height: 100vh;
justify-content: center;
align-items: center;
scroll-snap-align: start;
scroll-snap-stop: always;
}
https://codepen.io/Shampie/pen/vYOrOEW
提前感谢！
(起初代码不够，现在代码太多，我需要更多的文本……我不知道还能说什么(
滚动捕捉类型在分配给body元素时似乎不起作用。你可以通过将它分配给html标签来修复它：
html {
scroll-snap-type: y mandatory;
}
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
width: 80%;
margin: auto;
}
但有一个问题：这以前工作得很好，但自从最近更新到81版以来，它在Chrome中的表现很奇怪(对我来说，问题昨天就开始了(。
另一种方法是将所有内容包装在容器元素中，并为其指定滚动捕捉类型：
.body {
margin: 0; /* prevents a double scroll bar */
}
.scrollsnap-container {
max-height: 100vh;
overflow-y: scroll;
scroll-snap-type: mandatory; /* for older browsers */
scroll-snap-points-y: repeat(100vh); /* for older browsers */
scroll-snap-type: y mandatory;
}
.scrollsnap-section {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
<div class="scrollsnap-container">
<section id="slide-1" class="scrollsnap-section">
<h2>slide 1</h2>
</section>
<section id="slide-2" class="scrollsnap-section">
<h2>slide 2</h2>
</section>
<section id="slide-3" class="scrollsnap-section">
<h2>slide 3</h2>
</section>
<section id="slide-4" class="scrollsnap-section">
<h2>slide 4</h2>
</section>
<section id="slide-5" class="scrollsnap-section">
<h2>slide 5</h2>
</section>
</div>
这似乎对我更有效。