两个方向的无限滚动

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 到顶部和底部？

- INC

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

- Leng

---

还有一个问题，是否可以克隆div内容并将其插入到现有的div中，而不包括其div元素？ - INC

Answer 2

如果你正在使用jQuery，你可以相对容易地移动页面上的div，使用insertAfter或类似的方法。当你到达底部时，抓住页面上的第一个div，并将其移动到最后一个div的右侧。在确保始终获取正确的div方面，需要进行一些有趣且稍微棘手的工作，但完全可行。

- Ben Barden