无限滚动两个方向

Question

我一直在一个小型网站上工作，我希望它可以滚动并向上和向下循环。

我做了一个jsfiddle来表明我的问题。 目前我正在使用这种方法：

$(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/

我的问题是，没有转换，只有顶部和底部的内容完全相同时，此方法才有效。

任何想法如何在每次用户到达结尾时将相同的div添加到顶部和底部？

Answer 1

这是一个工作小提琴： http ： //jsfiddle.net/2L23c/

这是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 );

Answer 2

好吧，如果你正在使用jquery，你可以使用insertAfter等相当容易地在页面上移动div。 当你到达底部时，抓住页面上的第一个div并在最后一个之后向下移动。 有一些有趣而且略有挑剔的工作要确保你总是得到正确的，但它应该是完全可行的。