Infinite Scroll Effect with javascript

问题

anyone have a clue how to make a sroll effect like this? http://www.eurekasoft.com

I know the content is repeated at the end to create the illusion but i would like to know how to achieve the seemingly never end scroll.

Thanks!

回答1:

It appears that site is using Skrollr: http://prinzhorn.github.io/skrollr/

Scroll all the way down for links to the Github and more examples.

Deep down, it is using the function window.scrollTo() to set the scroll position, and probably setting DOM around that area so that it looks the same as where it was scrolled from.

https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L617

回答2:

This works for me :)

here is the example: http://www.cancerbero.mx (only enable in Chrome and Safari)

// #loop is the div ID where repetition begins

$(document).ready(function(){
            $(window).scroll(function(){
                var scroll = $(window).scrollTop();
                var limit = $('#loop').position().top;
                if(scroll >= limit){
                    window.scrollTo(0,1); // 1 to avoid conflicts
                }
                if(scroll == 0){
                  window.scrollTo(0,limit);  
                }
            });
        });

来源：https://stackoverflow.com/questions/24091962/infinite-scroll-effect-with-javascript