Trigger.scroll function inside another.scroll function（无限循环页面）

Question

我设法创建了一个类似于这样的无缝循环页面： 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 后调用这个 function。 而不是 go 一直到循环（我希望在页面加载时保留图像上方的一些空白）：我在这里尝试过： https://codepen.io/akmalmo/pen/QWdPmER - 但是这使循环停止向一个方向工作。 您仍然可以向后循环，但它会卡在向前的方向上。 我错过了什么？ 也不适用于 window 调整大小，但我想这是另一个问题。

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 值添加到不同的状态来让它工作。 如果他们有相同的 position 可能是问题所在。 它有点工作，但它是小故障和不可预测的： https://codepen.io/akmalmo/pen/eYgoQKd

有没有更简单的方法来完成上述操作？ 此外，是否有更好的方法来计算响应且不会在 window 调整大小时中断？

Answer 1

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

那将是我的解决方案，只需观察我们是向下滚动还是向上滚动，然后到达所需的元素，然后滚动到另一个元素。