我尝试使用滚动捕捉功能,但它不起作用。我很困惑 - 我做错了什么?
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
提前致谢!
(首先代码不够,现在代码太多,我需要更多文字......我不知道还能说什么)