CODEWITHSUNDEEP
javascriptjquery
INC
INC

Reputation: 35

Infinite Scroll in both directions

I've been working on a small website and I want it to be scrollable and looped both upwards and downwards.

I made a jsfiddle to show my problem. Currently I'm working with this method: 

$(document).ready(function(){
        $(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);
            }    
        });
    });

http://jsfiddle.net/2LDFA/

My problem is, that there is no transition, this method only works if the content at the top and bottom is exactly the same.

Any Ideas how I can add the same div to top and bottom every time the user reaches the end?

Upvotes: 3

Views: 2495

Answers (2)

Leng
Leng

Reputation: 2998

Here is a working fiddle: http://jsfiddle.net/2L23c/

And here is the javascript:

(function($){
    $(document).ready(function(){
        var html = $(".what").html();
        var what = '<div class="what">'+html+'</div>';
        $(window).scrollTop(1);
        $(window).scroll(function() {
            if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
                $(".what").last().after(what);
                if ($(".what").length > 2) {
                    $(".what").last().prev().remove();
                    $(window).scrollTop($(window).scrollTop() - $(".what").first().height());
                }
            }
            else if ( $(window).scrollTop() == 0 ) {
                $(".what").first().before(what);
                $(window).scrollTop($(".what").first().height());
                if ($(".what").length > 2) {
                    $(".what").last().remove();
                }
            }    
        });
    }); 
})( jQuery );

Upvotes: 4

Ben Barden
Ben Barden

Reputation: 2111

Well, if you're using jquery, you can move the divs around on the page fairly easily, using insertAfter or the like. When you get to the bottom, grab the first div on the page and move it down to right after the last one. There's some interesting and slightly finicky work to be done in making sure you always get the right one, but it should totally be doable.

Upvotes: 0

Related Questions