Scroll-Snap - Versionsgeschichte

46.114.148.151: /* Siehe auch */

2021-01-22T08:56:23Z

Siehe auch

46.114.148.151 am 22. Januar 2021 um 08:56 Uhr

2021-01-22T08:56:01Z

84.155.186.41: /* Scroll-Snap im Container */

2020-07-21T11:10:52Z

Scroll-Snap im Container

84.155.186.41 am 21. Juli 2020 um 11:07 Uhr

2020-07-21T11:07:40Z

84.155.186.41 am 21. Juli 2020 um 11:06 Uhr

2020-07-21T11:06:58Z

37.49.72.8 am 23. März 2020 um 18:58 Uhr

2020-03-23T18:58:24Z

37.49.72.8 am 23. März 2020 um 17:27 Uhr

2020-03-23T17:27:13Z

37.49.72.8 am 23. März 2020 um 16:55 Uhr

2020-03-23T16:55:30Z

37.49.72.8: Die Seite wurde neu angelegt: „ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts == Scroll Snap Basics == Die wichtigsten Eigenschaften sind scroll-snap-type…“

2020-03-23T16:00:17Z

Die Seite wurde neu angelegt: „ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts == Scroll Snap Basics == Die wichtigsten Eigenschaften sind scroll-snap-type…“

Neue Seite

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts

== 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.

Beispiel

<syntaxhighlight lang="html5">
<article class="scroller">
<section>
<h2>Section one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>

</syntaxhighlight>

<syntaxhighlight lang="css">
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.scroller section {
scroll-snap-align: start;
}
</syntaxhighlight>

<syntaxhighlight lang="css">
body {
margin: 0;
scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
}

section {
height: 100vh;
scroll-snap-align: start; /* An der Oberkante jeder Sektion soll gestoppt werden */
}

section:nth-of-type(even) {
background: #8cb11c;
}

section:nth-of-type(odd) {
background: #147c85;
}
</syntaxhighlight>

@@ Zeile 4: / Zeile 4: @@
   https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container
 == Siehe auch ==
-  Scroll-Snap (jQuery)
+  [[Scroll-Snap (jQuery)]]
 Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser.

@@ Zeile 1: / Zeile 1: @@
   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 ==

← Nächstältere Version		Version vom 21. Juli 2020, 11:10 Uhr
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.

@@ Zeile 1: / Zeile 1: @@
   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
+ https://stackoverflow.com/questions/53981699/pure-css-scroll-snap-only-works-with-the-body-as-the-container
 == Scroll Snap Basics ==
@@ Zeile 108: / Zeile 108: @@
 Ähnlicher Effekt wie bei Padding. Da man den scroll-margin im Kindelement setzt, kann man für jedes Element unterschiedliche Werte setzen.

← Nächstältere Version		Version vom 23. März 2020, 18:58 Uhr
Zeile 1:		Zeile 1:
	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
		+	https://css-tricks.com/practical-css-scroll-snapping/

	== Scroll Snap Basics ==		== Scroll Snap Basics ==

@@ Zeile 99: / Zeile 99: @@
 == scroll-padding und scroll-margin ==
-Hiermit lassen sich die Scrollpunkte justieren, wenn man z.B. einen fest positionierten Header hat, oder mit Abständen zwischen den Elementen hat.
+scroll-padding
-scroll-padding-topscroll-margin-top

@@ Zeile 6: / Zeile 6: @@
   scroll-snap-align (Kindelement)
 Die Eigenschaft scoll-snap-type wird auf das Elternelement angewendet und scroll-snap-align auf das Kindelement.
 Beispiel
 <syntaxhighlight lang="html5">
 <article class="scroller">
@@ Zeile 25: / Zeile 49: @@
 <syntaxhighlight lang="css">
-.scroller {
+<section><h2>SCROLL ME</h2><p>horizontal</p></section>
-    height: 300px;
+<section><h2>SNAPPED</h2></section>
-    overflow-y: scroll;
+<section><h2>GO ON</h2></section>
-    scroll-snap-type: y mandatory;
+<section><h2>THIS IS THE END</h2></section>
 </syntaxhighlight>
 <syntaxhighlight lang="css">
-body {
+* {
    margin: 0;
-   scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
+  padding: 0;
+}
 section {
    height: 100vh;
-   scroll-snap-align: start; /* An der Oberkante jeder Sektion soll gestoppt werden */
+  width: 100%;
+}
 section:nth-of-type(even) {
-   background: #8cb11c;
+   background: #2b8664;
+}
-section:nth-of-type(odd) {
+== scroll-padding und scroll-margin ==
-  background: #147c85;
+Hiermit lassen sich die Scrollpunkte justieren, wenn man z.B. einen fest positionierten Header hat, oder mit Abständen zwischen den Elementen hat.
+scroll-padding-topscroll-margin-top