使用javascript的无限滚动效果

Question

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!

Answer 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

Answer 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);  
                }
            });
        });