Scroll-Snap: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 112: | Zeile 112: | ||
=== Scroll-Snap im Container === | === Scroll-Snap im Container === | ||
https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container | https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container | ||
| + | <pre> | ||
| + | <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> | ||
| + | |||
| + | </pre> | ||
| + | |||
| + | <pre> | ||
| + | .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; | ||
| + | } | ||
| + | |||
| + | </pre> | ||
| + | |||
| + | |||
| + | |||
| + | 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 <div class="container"> will have a height equal to that of all the child elements combined, which doesn't give the scroll a fixed window to snap to. | ||
| + | |||
| + | Likewise, if you were doing horizontal scrolling, you'd need to provide your container with a fixed width. | ||
Version vom 21. Juli 2020, 12:10 Uhr
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
will have a height equal to that of all the child elements combined, which doesn't give the scroll a fixed window to snap to.
Likewise, if you were doing horizontal scrolling, you'd need to provide your container with a fixed width.
