在另一个 .scroll 函数内触发 .scroll 函数无限循环页面

如何解决在另一个 .scroll 函数内触发 .scroll 函数无限循环页面

我已经成功地创建了一个与此类似的无缝循环页面： Continuous Looping Page (Not Infinite Scroll)

但不是从页面末尾循环到页面顶部，而是在两个 div ID 内循环，这里引用的问题：Endless looping page

循环解决了这个问题： https://codepen.io/akmalmo/pen/YzNggJR

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

现在解决问题！我想要实现的是在我滚动到 #loop-start 后调用这个函数，而不是让它直接进入循环（我希望在页面加载时保留图像上方的一些空白）。我在这里尝试过：https://codepen.io/akmalmo/pen/QWdPmER - 但这会使循环停止向一个方向工作。您仍然可以向后循环，但它会卡在向前的方向上。我错过了什么？也不在调整窗口大小，但我想这是另一个问题。

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

$(document).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)
    }
    
});
         }
});

我几乎可以通过向不同状态添加一些 px 值来使其工作。如果他们有相同的位置可能是问题。它有点工作，但它是小故障和不可预测的：https://codepen.io/akmalmo/pen/eYgoQKd

有没有更简单的方法来做上述事情？另外，是否有更好的计算偏移量的方法，该方法具有响应性并且不会在调整窗口大小时中断？

解决方法

let prev_pos = $(document).scrollTop();
let loopstart_reached = false;
const loopend = $('#loop-end').offset().top;
const loopstart = $('#loop-start').offset().top;

$(document).on('scroll',function() {
  // if we scrolled past the loopstart element then we can iterate through
  if(loopstart_reached){
    // the current Y position is less or equal to the previous position,this means we are scrolling upwards
    if(prev_pos <= $(document).scrollTop()){
      if ( $(document).scrollTop() >= loopend ) {
        $(document).scrollTop($('#loop-start').offset().top)
      }
    }
    // else we are scrolling downwards
    else{
      if ( $(document).scrollTop() <= loopstart ) {
        $(document).scrollTop($('#loop-end').offset().top)
      }
    }
  }
  
  // store the new Y scroll pos
  prev_pos = $(document).scrollTop();
  
  // check if we reached the loopstart position
  if(prev_pos >= loopstart){
    loopstart_reached = true;
  }
});

这就是我的解决方案，只要看看我们是向下还是向上滚动，然后到达所需元素，然后滚动到另一个。