Javascript 复杂连续涡旋环

我的代码类似于：

<div id='right-column'>
    <div id='results'>
        <div id='result1>
            <div class='main'></div>
            <div class='details'></div>
        </div>
        <!-- ... -->
        <div id='result50>
            <div class='main'></div>
            <div class='details'></div>
        </div>
    </div>
</div>

div#内容{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
#盒子{
位置：相对位置；
垂直对齐：顶部；
宽度：100%；
高度：200px；
保证金：0；
填充：0；
}
#左上角{
位置：绝对位置；
z指数：4px；
左：0；
顶部：0px；
宽度：50%；
保证金：0；
填充：0；
}
#右下角{
位置：固定；
底部：0px；
z指数：5px；
左：50%；
宽度：50%；
保证金：0；
填充：0；
}
h1{边距：0；填充：0；颜色：#fff}
.black{背景：黑色；}
.white{背景：灰色；}
.green{背景：绿色；}
.brown{背景：brown；}

一个
两个
三
四
五
六
六
五
四
三
两个
一个

根据滚动方向将项目移动到顶部或底部 您可以使用jQuery的

.append（）

和

.prepend（）

来移动项目，而无需克隆它们

您将使用与惰性加载无限滚动（AJAX）类似的技术，但在这种情况下，您希望处理向上和向下滚动，而不是从服务器加载新内容，您只是循环列表中现有的DOM元素

下面我将演示一种技术。我将滚动位置存储在元素的

.data

缓存中，以便在检测滚动方向时轻松检索。我选择检测滚动方向，以避免预先进行不必要的变量分配，从而提高性能。否则，您将获取元素，并计算不会在该方向发生的滚动事件

滚动处理程序：

$('#right-column').on('scroll', function (e) {
    var $this = $(this),
        $results = $("#results"),
        scrollPosition = $this.scrollTop();

    if (scrollPosition > ($this.data('scroll-position') || 0)) {
        // Scrolling down
        var threshold = $results.height() - $this.height() - $('.result:last-child').height();

        if (scrollPosition > threshold) {
            var $firstResult = $('.result:first-child');
            $results.append($firstResult);
            scrollPosition -= $firstResult.height();
            $this.scrollTop(scrollPosition);
        }
    } else {
        // Scrolling up
        var threshold = $('.result:first-child').height();
        if (scrollPosition < threshold) {
            var $lastResult = $('.result:last-child');
            $results.prepend($lastResult);
            scrollPosition += $lastResult.height();
            $this.scrollTop(scrollPosition);
        }
    }
    $this.data('scroll-position', scrollPosition)
});

现有的DOM元素会根据您的滚动方向移动到列表的顶部或底部

更改要显示的结果数
结果1
结果1的详细信息
结果2
结果2的详细信息
结果3
结果3的详细信息
结果4
结果4的详细信息
结果5
结果5的详细信息
结果6
结果6的详细信息
结果7
结果7的详细信息
结果8
结果8的详情
结果9
结果9的详情
结果10
结果10的详情

我认为您需要的是AJAX分页。它不是一个带有AJAX分页的无限滚动。在这种情况下，我真的需要一个具有有限数量结果的循环。我的想法是复制#结果，整个结果列表。如果向下滚动，则添加它；如果向上滚动，则添加它