46.114.148.151 am 22. Januar 2021 um 09:08 Uhr

2021-01-22T09:08:10Z

46.114.148.151 am 22. Januar 2021 um 09:02 Uhr

2021-01-22T09:02:16Z

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'''…“

2021-01-22T09:01:18Z

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'''…“

Neue Seite

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>

← Nächstältere Version		Version vom 22. Januar 2021, 09:02 Uhr
Zeile 1:		Zeile 1:

−	Einfaches aber effektives jQuery Skript, welches Scroll-Snap bis IE 9 abbildet. Funktioniert in komplexen HTML Setups besser.	+	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'''		'''jQuery Plugin & Beispiel'''

@@ Zeile 97: / Zeile 97: @@
    });
 })
 </syntaxhighlight>

Scroll-Snap (jQuery) - Versionsgeschichte

46.114.148.151 am 22. Januar 2021 um 09:08 Uhr

46.114.148.151 am 22. Januar 2021 um 09:02 Uhr

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'''…“