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

Question

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

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

And the loop solved with this: 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)
    }
});

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

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?

Good catch. I have changed this to document. Still the problem persists though. — knutagard, Apr 28 '21 at 07:16
I guess there is a conflict with the scroll calls going to the same places? — knutagard, Apr 28 '21 at 07:51
You can remove one document scroll though, because you're already in one. — Refilon, Apr 28 '21 at 08:33
Ah. I see. Tried that just now, and of course there may be something I'm missing... but that stopped the backwards loop from working — knutagard, Apr 28 '21 at 10:35
I want to help, but I'm not sure what you're trying to accomplish. Do you have a good working example (elsewhere) of what you're try to achieve? — Refilon, Apr 28 '21 at 11:38
Thank you @Refilon. I have a page of images. When you enter, There is spacing in the top. When I scroll down to #loop-start, I wish to start my function – looping the page from #loop-start / #loop-end /vice versa. I wish to start the function that way, to prevent the initial spacing from appearing when you go back up past #scroll-start. My first codepen example shows the loop. My second codepen how I have wrapped it in another function, which breaks. I almost have it working now actually by adding some px to the states https://codepen.io/akmalmo/pen/eYgoQKd, but it's glitchy + breaks on resize — knutagard, Apr 28 '21 at 12:33
not an answer, but give a look here: https://stackoverflow.com/a/65308207/4845566 - You may be able to get the scroll amount. — deblocker, May 02 '21 at 17:45
So what you want to achieve is that when you scroll to loop-start, you will go to loop-end and from loop-end you will go back to loop-start? So it won't stop scrolling anymore? — Refilon, May 04 '21 at 09:41
Yes. A continuous loop between those. But not start until you first reach loop-start. And also wondering how to calculate those states more responsively so it works on window resize. — knutagard, May 05 '21 at 06:47

Daniel · Accepted Answer · 2021-05-07T09:28:17.307

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

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.

edited May 07 '21 at 09:28

answered May 06 '21 at 16:54

Daniel

166
8

Hi Daniel. This feels more solid, thank you. Though if one haven't reached loop-start and tries to scroll up, you go directly to loop-end. Is there a way to prevent it from working in that direction as well until you have reached loop-start? – knutagard May 07 '21 at 07:44
Should the 'going up' one also have something with prev_pos? Also. What does the refresh previous position do? Sorry, just trying to understand – knutagard May 07 '21 at 07:51
1

refresh preevious position means we are storing the new scrollTop value, to compare it in the next scroll iteration, if the previous Y value is less then the current then we are going upwards (scrolling up) – Daniel May 07 '21 at 09:18
edited my answer, hope this helps – Daniel May 07 '21 at 09:28
This is exactly what I was looking for and the comments to go with it are very helpful, thank you @Daniel! – knutagard May 09 '21 at 07:56

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

1 Answers1

Linked