0

我设法创建了一个类似于这样的无缝循环页面： 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

有没有更简单的方法来完成上述操作？此外，是否有更好的方法来计算响应且不会因窗口调整大小而中断的偏移量？

4

1 回答 1

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

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

于 2021-05-06T16:54:51.150 回答