无限循环页面 - 编程之家

如何解决无限循环页面

我希望做一些类似于这里解决的事情： Continuous Looping Page (Not Infinite Scroll)

但我试图做到这一点，当您到达某个 div ID (#loop-end) 时，您会转到另一个 div ID (#loop-start)。

我尝试过的一些例子是：

    $(document).scroll(function(){
     if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
    $(document).scrollTop(0)
} else if ($(window).scrollTop() < 1) {
    $(document).scrollTop($(document).height())
}
    });

您可以在此处的示例中看到：https://codepen.io/akmalmo/pen/VwPRMaK

我也在探索是否可以在下面做这样的事情-感谢@prettyInPink的推动-我对此唯一的问题是了解我如何可以在相反的方向上做同样的事情+也使其工作调整窗口大小 https://codepen.io/akmalmo/pen/ZELPxje

 var loopend = $('#loop-end').offset().top,$window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= loopend ) {
    $(document).scrollTop($('#loop-start').offset().top)
    }
});

基本上。第一个代码示例，我正在寻找可以在两个方向上无限滚动的代码示例。但是在#loop-start 和#loop-end 内循环而不是在文档结束和文档顶部循环。我在这里工作，我只需要让它在调整大小时工作，而不是在页面加载时立即跳转到循环结束/开始

编辑

展示我的最新探索。我真的很接近这个。我正在努力解决的最后一件事是将其全部包装在一个函数中（+ 重新计算窗口调整大小时的偏移值，puh），以使其在达到特定 div 时启动。但是这样做会与循环发生冲突


var element_position = $('#loop-init').offset().top;

$(window).on('scroll',function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {


 var loopend = $('#loop-end').offset().top;
 var loopstart = $('#loop-start').offset().top;

$(document).scroll(function() {
    if ( $(document).scrollTop() >= loopend ) {
    $(document).scrollTop($('#loop-start').offset().top)
    }
  else if ( $(document).scrollTop() <= loopstart ) {
    $(document).scrollTop($('#loop-end').offset().top)
    }
  
});

         }
});