I am trying to set up a snapping scroll with pure css.
With the **snapping scroll there is a container for all the elements over which the snapping scroll is active containing the elements which the scroll snaps onto.
When I am using the body-tag as the container and elements with the class "section", everything works fine:
body {
font-family: "Arial", sans-serif;
margin: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.section {
height: calc(100vh - 14em);
font-size: 1em;
color: white;
padding: 7em;
margin: 0;
scroll-snap-align: start;
}
.section:nth-of-type(1) {
background-color: hsl(0, 100%, 30%);
}
.section:nth-of-type(2) {
background-color: hsl(40, 100%, 30%);
}
.section:nth-of-type(3) {
background-color: hsl(50, 100%, 30%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll-Snap Body</title>
<link rel="stylesheet" href="scrollsnap_body.css">
</head>
<body>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur eius est fuga inventore
officia possimus quibusdam recusandae sunt. Adipisci blanditiis corporis cupiditate dolorem ducimus
excepturi laboriosam officia quae vero.</p>
</div>
<div class="section">
<p>Accusamus amet dicta dolorum fugiat id itaque iure minus molestiae nesciunt non omnis quibusdam, veniam!
Animi, aspernatur consectetur doloremque ducimus illum perferendis quam ut? Aspernatur deserunt doloremque
error magnam minima.</p>
</div>
<div class="section">
<p>Ab accusantium aut corporis, cumque dolor ducimus ea est, excepturi facere, fuga id labore magni minima nemo
odio officia officiis quaerat quibusdam quo sit tempora tenetur unde veritatis! Doloremque, nam.</p>
</div>
</body>
</html>
But when I try to use a separate div with class "container" as the container it doesn't work:
body {
font-family: "Arial", sans-serif;
margin: 0;
overflow-y: scroll;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
margin: 0;
}
.section {
height: calc(100vh - 14em);
font-size: 1em;
color: white;
padding: 7em;
scroll-snap-align: start;
}
.section:nth-of-type(1) {
background-color: hsl(0, 100%, 30%);
}
.section:nth-of-type(2) {
background-color: hsl(40, 100%, 30%);
}
.section:nth-of-type(3) {
background-color: hsl(50, 100%, 30%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll-Snap Container</title>
<link rel="stylesheet" href="scrollsnap_container.css">
</head>
<body>
<div class="container">
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur eius est fuga inventore
officia possimus quibusdam recusandae sunt. Adipisci blanditiis corporis cupiditate dolorem ducimus
excepturi laboriosam officia quae vero.</p>
</div>
<div class="section">
<p>Accusamus amet dicta dolorum fugiat id itaque iure minus molestiae nesciunt non omnis quibusdam, veniam!
Animi, aspernatur consectetur doloremque ducimus illum perferendis quam ut? Aspernatur deserunt doloremque
error magnam minima.</p>
</div>
<div class="section">
<p>Ab accusantium aut corporis, cumque dolor ducimus ea est, excepturi facere, fuga id labore magni minima nemo
odio officia officiis quaerat quibusdam quo sit tempora tenetur unde veritatis! Doloremque, nam.</p>
</div>
</div>
</body>
Why is that?
Aucun commentaire:
Enregistrer un commentaire