Scroll-Snap
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts https://css-tricks.com/practical-css-scroll-snapping/ https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container
Scroll Snap Basics
Die wichtigsten Eigenschaften sind
scroll-snap-type (Containerelement) scroll-snap-align (Kindelement)
Die Eigenschaft scoll-snap-type wird auf das Elternelement angewendet und scroll-snap-align auf das Kindelement.
/* Keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* Optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; /* etc */ /* Global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset;
Beispiel
Beispiel 2
<article class="scroller">
<section>
<h2>Section one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>
<section><h2>SCROLL ME</h2><p>horizontal</p></section>
<section><h2>SNAPPED</h2></section>
<section><h2>GO ON</h2></section>
<section><h2>THIS IS THE END</h2></section>
* {
box-sizing: border-box;
}
body,html{
text-align: center;
min-height: 100%;
margin: 0;
padding: 0;
color: white;
font-family: sans-serif;
}
html {
margin: 0;
scroll-snap-type: x mandatory;
}
body{
/*
NOT working
scroll-snap-type: y mandatory;
*/
display:flex;
}
h2{
text-align: center;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width: 100%;
flex-shrink: 0;
scroll-snap-align: start; /* Stop at the left */
background: #146585;
}
section:nth-of-type(even) {
background: #2b8664;
}
scroll-padding und scroll-margin
scroll-padding
Scroll-Padding setzt man im Container. Damit kann man erreichen, dass ein Element nicht direkt an den Rand schnappt, sondern kurz davor stoppt. Das ist z.B. bei einem fixed Header nützlich, der ansonsten den Inhalt überlappen würde.
scroll-margin
Ähnlicher Effekt wie bei Padding. Da man den scroll-margin im Kindelement setzt, kann man für jedes Element unterschiedliche Werte setzen.
Beispiele
Scroll-Snap im Container
https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container
<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>
.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%);
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
margin: 0;
height: 100vh;
}
You're almost there. By default, the <body> element has a fixed height of 100vh. You just need to add the same to your container class.
That gives the scroll something to snap to. Otherwise, the
Likewise, if you were doing horizontal scrolling, you'd need to provide your container with a fixed width.
