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

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 之后调用这个函数，而不是让它直接进入循环（我在图像上方有一些空白，我希望在页面加载时保留这些空白）。我在这里试过这个：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 值来使其工作。如果他们具有相同的位置可能是问题所在。它有点工作，但它是小故障和不可预测的：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;
  }
});

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

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

Trigger .scroll function inside another .scroll function (endless looping page)

jquery

portfolio

offset

scrolltop

endlessscroll