Wikizone - Benutzerbeiträge [de]

Scroll-Snap (jQuery)

2021-01-22T09:08:10Z

46.114.148.151:

Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser als CSS scroll-snap und ist kompatibler.

'''jQuery Plugin & Beispiel'''

<syntaxhighlight lang="javascript">
/*! jQuery Scroll Snap 1.0.0 | MIT *
* https://github.com/jpcurrier/jquery-scroll-snap !*/
( function( $ ){
$.fn.scrollSnap = function( options ){

// default options
var settings = $.extend({
speed: 400
}, options );

var scrollStop,
lastScrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;

function snapScroll( $snap, scroll, direction ){
if( $( 'body' ).hasClass( 'lock-scroll' ) )
return;

var windowHeight = $( window ).height();
direction = typeof direction !== 'undefined' ? direction : 'up';

var scrollTo = false;
$snap.each( function(){
if(
scroll <= $( this ).offset().top && (
// advance
( direction == 'down' && scroll >= $( this ).offset().top - ( windowHeight * 2 / 3 ) ) ||
// stabilize
( direction == 'up' && scroll >= $( this ).offset().top - ( windowHeight / 3 ) )
) ||
scroll >= $( this ).offset().top && (
// advance
( direction == 'up' && scroll <= $( this ).offset().top + ( windowHeight * 2 / 3 ) ) ||
// stabilize
( direction == 'down' && scroll <= $( this ).offset().top + ( windowHeight / 3 ) )
)
){
$( 'body:not( .lock-scroll )' ).addClass( 'lock-scroll' );
scrollTo = $( this ).offset().top;
}
} );

if( scrollTo !== false ){
$( 'html, body' ).animate(
{ scrollTop: scrollTo },
settings.speed,
function(){
$( 'body.lock-scroll' ).removeClass( 'lock-scroll' );
/*setTimeout( function(){
$( 'body.lock-scroll' ).removeClass( 'lock-scroll' );
}, 600 );*/
}
);
}
}

var $snap = this;
$( window ).on( 'scroll', function(){
var scroll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;

var direction = 'up';
if( scroll > lastScrollTop )
direction = 'down';

lastScrollTop = scroll;

clearTimeout( scrollStop );
scrollStop = setTimeout( function(){
snapScroll( $snap, scroll, direction );
}, 200 );
} );
};
} )( jQuery );

$(document).ready(function() {

// default options
//$( '.snap' ).scrollSnap();

// custom options
$( '.snap' ).scrollSnap({
speed: 400
});
})
</syntaxhighlight>

<syntaxhighlight lang="css">
body.lock-scroll{
overflow: hidden;
}
</syntaxhighlight>

<syntaxhighlight lang="html5">
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
</syntaxhighlight>

Scroll-Snap (jQuery)

2021-01-22T09:02:16Z

46.114.148.151:

Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser als CSS scroll-snap und ist kompatibler.

'''jQuery Plugin & Beispiel'''

<syntaxhighlight lang="javascript">
/*! jQuery Scroll Snap 1.0.0 | MIT *
* https://github.com/jpcurrier/jquery-scroll-snap !*/
( function( $ ){
$.fn.scrollSnap = function( options ){

// default options
var settings = $.extend({
speed: 400
}, options );

var scrollStop,
lastScrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;

function snapScroll( $snap, scroll, direction ){
if( $( 'body' ).hasClass( 'lock-scroll' ) )
return;

var windowHeight = $( window ).height();
direction = typeof direction !== 'undefined' ? direction : 'up';

var scrollTo = false;
$snap.each( function(){
if(
scroll <= $( this ).offset().top && (
// advance
( direction == 'down' && scroll >= $( this ).offset().top - ( windowHeight * 2 / 3 ) ) ||
// stabilize
( direction == 'up' && scroll >= $( this ).offset().top - ( windowHeight / 3 ) )
) ||
scroll >= $( this ).offset().top && (
// advance
( direction == 'up' && scroll <= $( this ).offset().top + ( windowHeight * 2 / 3 ) ) ||
// stabilize
( direction == 'down' && scroll <= $( this ).offset().top + ( windowHeight / 3 ) )
)
){
$( 'body:not( .lock-scroll )' ).addClass( 'lock-scroll' );
scrollTo = $( this ).offset().top;
}
} );

if( scrollTo !== false ){
$( 'html, body' ).animate(
{ scrollTop: scrollTo },
settings.speed,
function(){
$( 'body.lock-scroll' ).removeClass( 'lock-scroll' );
/*setTimeout( function(){
$( 'body.lock-scroll' ).removeClass( 'lock-scroll' );
}, 600 );*/
}
);
}
}

var $snap = this;
$( window ).on( 'scroll', function(){
var scroll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;

var direction = 'up';
if( scroll > lastScrollTop )
direction = 'down';

lastScrollTop = scroll;

clearTimeout( scrollStop );
scrollStop = setTimeout( function(){
snapScroll( $snap, scroll, direction );
}, 200 );
} );
};
} )( jQuery );

$(document).ready(function() {

// default options
//$( '.snap' ).scrollSnap();

// custom options
$( '.snap' ).scrollSnap({
speed: 400
});
})
</syntaxhighlight>

<syntaxhighlight lang="html5">
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
</syntaxhighlight>

Scroll-Snap (jQuery)

2021-01-22T09:01:18Z

46.114.148.151: Die Seite wurde neu angelegt: „ Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser. '''jQuery Plugin & Beispiel'''…“

Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser.

'''jQuery Plugin & Beispiel'''

<syntaxhighlight lang="javascript">
/*! jQuery Scroll Snap 1.0.0 | MIT *
* https://github.com/jpcurrier/jquery-scroll-snap !*/
( function( $ ){
$.fn.scrollSnap = function( options ){

// default options
var settings = $.extend({
speed: 400
}, options );

var scrollStop,
lastScrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;

function snapScroll( $snap, scroll, direction ){
if( $( 'body' ).hasClass( 'lock-scroll' ) )
return;

var windowHeight = $( window ).height();
direction = typeof direction !== 'undefined' ? direction : 'up';

var scrollTo = false;
$snap.each( function(){
if(
scroll <= $( this ).offset().top && (
// advance
( direction == 'down' && scroll >= $( this ).offset().top - ( windowHeight * 2 / 3 ) ) ||
// stabilize
( direction == 'up' && scroll >= $( this ).offset().top - ( windowHeight / 3 ) )
) ||
scroll >= $( this ).offset().top && (
// advance
( direction == 'up' && scroll <= $( this ).offset().top + ( windowHeight * 2 / 3 ) ) ||
// stabilize
( direction == 'down' && scroll <= $( this ).offset().top + ( windowHeight / 3 ) )
)
){
$( 'body:not( .lock-scroll )' ).addClass( 'lock-scroll' );
scrollTo = $( this ).offset().top;
}
} );

if( scrollTo !== false ){
$( 'html, body' ).animate(
{ scrollTop: scrollTo },
settings.speed,
function(){
$( 'body.lock-scroll' ).removeClass( 'lock-scroll' );
/*setTimeout( function(){
$( 'body.lock-scroll' ).removeClass( 'lock-scroll' );
}, 600 );*/
}
);
}
}

var $snap = this;
$( window ).on( 'scroll', function(){
var scroll =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;

var direction = 'up';
if( scroll > lastScrollTop )
direction = 'down';

lastScrollTop = scroll;

clearTimeout( scrollStop );
scrollStop = setTimeout( function(){
snapScroll( $snap, scroll, direction );
}, 200 );
} );
};
} )( jQuery );

$(document).ready(function() {

// default options
//$( '.snap' ).scrollSnap();

// custom options
$( '.snap' ).scrollSnap({
speed: 400
});
})
</syntaxhighlight>

<syntaxhighlight lang="html5">
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
<section class="snap" style="height: 50vh;">
LoremIpsum
</section>
</syntaxhighlight>

Scroll-Snap

2021-01-22T08:56:23Z

46.114.148.151: /* Siehe auch */

== Links ==
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
== Siehe auch ==
[[Scroll-Snap (jQuery)]]
Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser.

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

<pre>
/* 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;
</pre>

Beispiel

Beispiel 2
<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">
<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>
</syntaxhighlight>

<syntaxhighlight lang="css">
* {
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;
}
</syntaxhighlight>

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

Scroll-Snap

2021-01-22T08:56:01Z

46.114.148.151:

== Links ==
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
== Siehe auch ==
Scroll-Snap (jQuery)
Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser.

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

<pre>
/* 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;
</pre>

Beispiel

Beispiel 2
<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">
<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>
</syntaxhighlight>

<syntaxhighlight lang="css">
* {
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;
}
</syntaxhighlight>

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