双向无限滚动 - 向上和向下

好的...我解决了。

页面顶部，当你到达顶部时，它会立即将滚动位置重新定位到底部。

$(window).scroll(function() {
    if ( $(window).scrollTop() >= 18830 ) {
        $(window).scrollTop(201);
    }
    else if ( $(window).scrollTop() == 0 ) {
        $(window).scrollTop(18629);
    }    
});

然后我确保页面底部和顶部的内容相同。我以为这次搬迁发生时会有闪光灯或其他东西，但它很顺利！

我最喜欢的解决方案是这个(代码(，因为它在到达底部之前在底部添加元素，确保滚动保持连续(即使平滑滚动(。但是，它在滚动可以很快发生的手机上效果不佳。我推荐Marijn Haverbeke关于CodeMirror中假滚动条的精彩文章，他处理了类似的问题。

我留给你一些片段。

首先，一些背景。为什么我们要伪造滚动条？

为了在加载大型文档时保持响应，CodeMirror 不会呈现整个文档，而只会呈现当前滚动到视图中的部分。这意味着它创建的 DOM 节点数量受到视口大小的限制，并且由文本更改触发的浏览器重新布局相对便宜。

再往下...

然后，它侦听滚轮事件，但从不调用 preventDefault 或滚动以响应它们。相反，它通过设置超时来观察 wheel 事件滚动内容的像素量，并使用它来在运行时调整其增量到像素速率。

你的HTML正文两次(或三次((在javascript或其他方式中(。从中间副本而不是顶部开始页面，然后您可以根据需要处理滚动。

还有其他线索吗？

见过这些吗？

5 jQuery 无限滚动演示

我找不到起源的jsfiddle。(我没有写，也不知道是谁写的(

正如许多人所建议的那样，如果您的页面在顶部和底部看起来不完全相同，则需要克隆您的内容以使其看起来像它。我用这种技术做了一个非常流畅的例子：

/*
Ininite looping scroll.
Tested and works well in latest Chrome, Safari and Firefox.
*/
(function (window) {
  'use strict';
  var doc = document,
    body = doc.body,
    html = doc.documentElement,
    startElement = doc.getElementsByClassName('is-start')[0],
    clones = doc.getElementsByClassName('is-clone'),
    disableScroll = false,
    docHeight,
    scrollPos,
    clonesHeight,
    i;
  function getScrollPos() {
    return (window.pageYOffset || html.scrollTop)  - (html.clientTop || 0);
  }
  function getDocHeight() {
    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
  }
  function getClonesHeight() {
    i = 0;
    clonesHeight = 0;
    for (i; i < clones.length; i += 1) {
      clonesHeight = clonesHeight + clones[i].offsetHeight;
    }
    return clonesHeight;
  }
  docHeight = getDocHeight();
  clonesHeight = getClonesHeight();
  window.addEventListener('resize', function () {
    scrollPos = getScrollPos();
    docHeight = getDocHeight();
    clonesHeight = getClonesHeight();
    if (scrollPos <= 0) {
      window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
    }
  }, false);
  window.addEventListener('scroll', function () {
    if (disableScroll === false) {
      scrollPos = getScrollPos();
      if (clonesHeight + scrollPos >= docHeight) {
        // Scroll to the top when you’ve reached the bottom
        window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
        disableScroll = true;
      } else if (scrollPos <= 0) {
        // Scroll to the top of the clones when you reach the top.
        window.scroll(0, docHeight - clonesHeight);
        disableScroll = true;
      }
      if (disableScroll) {
        // Disable scroll-repositioning for a while to avoid flickering.
        window.setTimeout(function () {
          disableScroll = false;
        }, 100);
      }
    }
  }, false);
  // Needs a small delay in some browsers.
  window.setTimeout(function () {
    if (startElement) {
      // Start at the middle of the starting block.
      window.scroll(0, Math.round(startElement.getBoundingClientRect().top + document.body.scrollTop - (window.innerHeight - startElement.offsetHeight) / 2));
    } else {
      // Scroll 1 pixel to allow upwards scrolling.
      window.scroll(0, 1);
    }
  });
}(this));

section {
  position: relative;
  text-align: center;
  height: 80vh;
}
.red {
  background: #FF4136;
}
.green {
  background: #2ECC40;
}
.blue {
  background: #0074D9;
}
.orange {
  background: rebeccapurple;
}
h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 5vw;
  color: #fff;
  text-transform: uppercase;
}
body {
  font-family: "Avenir Next", Montserrat, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
}
::scrollbar {
  display: none;
}

<section class="green">
  <h1>One</h1>
</section>
<section class="red">
  <h1>For</h1>
</section>
<section class="blue">
  <h1>All</h1>
</section>
<section class="orange">
  <h1>And</h1>
</section>
<section class="blue">
  <h1>All</h1>
</section>
<section class="red">
  <h1>For</h1>
</section>
<!--
These following blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height.
-->
<section class="green is-clone is-start">
  <h1>One</h1>
</section>
<section class="red is-clone">
  <h1>For</h1>
</section>

在马哈茂德的回答的基础上，我在几分钟内就破解了这个。

当使用键或鼠标滚轮滚动时，它在某种程度上(至少在 Firefox 上(工作，但在拖动滚动条时它会变得毛刺。根据div高度与视口高度的关系，各种烟花也可能发生。

不过，我希望这能帮助你走上正确的方向。

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;
    // Scrolling too high
    if( scrollPos <= lowerLimit ){
        // Move content to top;
        $(lastDiv).prependTo(document.body);
        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());
    }
    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){
        // Move content to bottom
        $(firstDiv).appendTo(document.body);
        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}

$(window).scroll(onScroll);
$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});
</script>
</head>
<body>
<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>
</body>
</html>