在另一个 .scroll 函数内触发 .scroll 函数(无限循环页面) [英] Trigger .scroll function inside another .scroll function (endless looping page)

问题描述

我已经成功地创建了一个与此类似的无缝循环页面:连续循环页面(非无限滚动)

I have managed to create a seamless looping page similar to this: Continuous Looping Page (Not Infinite Scroll)

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

But instead of looping from end of page to top of page, I am looping within two div ID's, question referenced here: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- 但这会使循环停止在一个方向上工作.您仍然可以向后循环，但它会卡在向前的方向上.我错过了什么?也不在调整窗口大小，但我想这是另一个问题.

Now to the problems! What I am trying to achieve is calling this function after I have scrolled to #loop-start, and not make it go straight down to the loop (I have some whitespace above the images which I wish to keep on page load). And I have tried this here: https://codepen.io/akmalmo/pen/QWdPmER - But this makes the loop stop working in one direction. You can still loop backwards but it gets stuck in the forward direction. What am I missing? Also not working on window resize but that I guess is another question.

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

I almost have it working by adding some px values to the different states. If them having the same position might be the issue. And it sort of works, but it's glitchy and unpredictable: https://codepen.io/akmalmo/pen/eYgoQKd

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

Is there a simpler way of doing the above? Also, is there a better way of calculating offset that is responsive and doesn't break on window resize?

推荐答案

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

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

That would be my solution, just watch if we are scrolling down or up and we arrive to the desired elements then scroll to the other one.

这篇关于在另一个 .scroll 函数内触发 .scroll 函数(无限循环页面)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！