I am struggling with scroll-snap in CSS.
Is there a way to use scroll-snap only in one vertical direction?
I want to make it snap on every section when scrolling down, but not to snap when scrolling back up again. Is it possible inside CSS or do I need some JavaScript?
html {
scroll-snap-type: y mandatory;
}
body {
margin: 0;
scroll-snap-type: y mandatory;
}
section {
font-family: sans-serif;
font-size: 12ch;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
<head>
<!-- MAIN STYLE -->
<link rel="stylesheet" href="style.css">
</head>
<main>
<section>
<h1>Hello!</h1>
</section>
<section>
<h1>Toodles~</h1>
</section>
<section>
<h1>Boodles~</h1>
</section>
</main>
</html> from Scroll Snap only when scrolling down
No comments:
Post a Comment