Scoll loop inside div
I would like to try and achieve a page scroll loop effect. I found this script the one I was making some changes to as a 1px load scroll to enable the loop.
Should I apply this effect on a div ... but I can't figure out what to change the code to make it work.
Did it help turn the loop into a wrapped div?
thanks to A.
$(document).ready(function() {
$('body').height( WRHeight + $(window).height() );
$(window).scroll(function() {
if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
$(window).scrollTop(1);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop($('body').height() - $(window).height() -1);
}
});
source to share
I re-executed the script and added some comments to hopefully make this clearer:
// Container element which has a scrollbar
var $c = $("#container");
// Child element which is taller than the container
var $e = $("#element");
// The point at which the page will loop when scrolling down
var loopPoint = $e.height() - $c.height();
// Define a function which runs whenever the scroll position of $c changes
$c.scroll(function () {
// If the new scroll position matches our loop point
if ($c.scrollTop() === loopPoint) {
// Scroll to (almost) the the top ('0' would be the top; we do this so we don't loop back again instantly)
$c.scrollTop(1);
}
// Otherwise, if the new scroll position = the top of the element
else if ($c.scrollTop() === 0) {
// Scroll to (almost) the bottom, we can use (our loop point - 1)
$c.scrollTop(loopPoint - 1);
}
});
Here's a JSfiddle for you: http://jsfiddle.net/cjmoran/2do67um8/
Note. I noticed that this approach can severely break through click scrolling in Chrome very badly, to the point where the JSfiddle crashes. There might be a better way to implement this to prevent this from happening. It appears to work fine on the latest Firefox, but these are the only browsers I've tested.
source to share