Jump to content
Search Community

Infinite Scroll in both directions

s94QREspJB test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hey guys,


I've recently been working on a site that features endless scrolling, meaning, as soon as a user reaches the end of the site (.outro in the CodePen example), the site should jump back to the top. This is done seamlessly by repeating the intro and outro component (components meaning SFC's via Vue.js  2.6). With the help of the ScrollTrigger, this works like a charm for top to bottom scrolling which is managed by introScrollTrigger. Now I'd like to implement this also for the other scroll direction. Therefore, I set up another instance of ScrollTrigger, outroScrollTrigger, which sets the scroll position to the end of the site as soon as the bottom of .intro is reached. It technically works as well but as you might've guessed, they trigger themselves once a user scrolls down and jumps back to the top because the other trigger kicks in. I attached a CodePen for you to check this issue out. Just scroll and you will see what I mean.

To solve this, I thought about another trigger to only set up the outro trigger as soon as, say, a user reaches the middle of the content and when the jump is done, is deactivated somehow again. But then it has to be disabled and activated everytime which seems super cost-effective and not the cleanest approach to handle this.

Has anyone of you ever encountered this before and knows a solution to this? Any help would be greatly appreciated!

Thank you guys in advance and have a great day wherever you are!


See the Pen ZEaXrKx by spar-nation-alleluia (@spar-nation-alleluia) on CodePen

Link to comment
Share on other sites

  • 4 weeks later...

Hey @Cassie, thx for your reply.

I tried it and it did work, indeed. Just modified the flag to be controlled by a scroll event listener to keep it dynamic. In my application, I additionally used a slight throttle (lodash) of 10ms. The only problem is that it sporadically stops working. So for instance I scroll a few times upwards, which works, then scroll downwards and after a few times, the callback gets executed but does not perform the scrollTo. I adjusted my code to only work with one Scroll Trigger to eliminate the possbility of the two Scroll Trigger instances messing with each other (should work, though) and also to keep my code relatively lean. Still, the same error occurs. This is also experiencable in your demo. I tried to update my pen but for some reason, the scrollTo with document.body.scrollHeight does not work anymore. If I put in a number in px (500, for instance), it does work, however. I think it's due to the fact that the reference to scrollHeight does no longer yield a result.

See the Pen ZEaXrKx?editors=1111 by spar-nation-alleluia (@spar-nation-alleluia) on CodePen

So, my questions are:
1. Does anyone know how to fix that to make the demo work

2. If the demo works: can you guys see the issue described above (alternatively: check out @Cassies modified pen)

3. How can this issue be resolved?

4. on mobile: anyone ever had the issue of having to resize the scroll trigger after the OS-browser related menu bars opo up? How would I go about that?

Puh, a lot, I know. Hope anyone here can help out!

Thanks guys!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...