在固定 div 内带有内容循环的无限滚动答案

【问题标题】：infinite scroll with content loop inside a fixed div在固定 div 内带有内容循环的无限滚动
【发布时间】：2015-09-11 14:51:07
【问题描述】：

有人知道以下问题的解决方案吗？

我试图在一个固定的 div 内进行内容循环的无限滚动，我已经修改了这段代码......但是当我尝试修复“.content”div并给他一个定义的高度时，它总是会杀死整个代码。

谢谢

$(function() {
    // every 1 seconds, check + update
    setInterval(appendContent, 400);
    setInterval(continueScrolling, 100);
});

var b = $('.content');

// if almost at bottom, append more content
function appendContent() {
    if($(window).scrollTop() + $(window).height() * 2 > $(".content").height()) {
        b.html(b.html() + b.html()); // double content
    }    
}

// continue scrolling linearly
function continueScrolling() {
    y = $(window).scrollTop();
    $("html, body").stop().animate({
        scrollTop: y+1000
    }, {
        duration: 10000,
        easing: 'linear',
        queue: false
    });
}


var page = $("html, body");

$(function() {

   page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
       page.stop();
   });

   page.animate({ scrollTop: $(this).position().top }, 'slow', function(){
       page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
   });

   return false; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
============================<br>
test1<br>
test2<br>
test3<br>
test4<br>
test5<br>
</div>

【问题讨论】：

标签： jquery html css loops scroll

【解决方案1】：

你想定义什么高度？如果数字太小，您将在循环的每次迭代中创建大量 DOM 元素，这可能会杀死浏览器呈现代码。尝试增加每次刷新之间的间隔并降低每次添加的内容。

关于固定的位置，嗯，你是在告诉元素冻结在适当的位置，这样无论你走到哪里它都可以呆在那里。此功能通常用于置顶或导航栏，我不明白您为什么要在这里使用它。

【讨论】：