Jump to content


Vertical Infinite Scroll

Moderator Tag

Recommended Posts

Hey Hector. To do this effect you'll have to disable regular scrolling completely and replace it with functionality to translate your elements around (using the wheel event paired with proper swiping detection - perhaps HammerJS can help there). You can see that alternative modes of navigation (such as using the keyboard, middle clicking, etc.) don't work on that website. 


As for how to do the translation, this thread can help you get the infinite wrapping logic:


  • Like 1
Link to comment
Share on other sites

Hi Zach,

Thank you for your answer. I tried to adapt the script for vertical use but I did something wrong. Perhaps you could help me a little bit. Thank you!


See the Pen yLaMomw by Hector18 (@Hector18) on CodePen

Link to comment
Share on other sites

What seems to be wrong? It seems to work well for me but perhaps I'm missing something.

Link to comment
Share on other sites

Edit: On first time you start dragging the items jumps all above one time their height


I've forgot to put the items on position absolute in css, but I solved meanwhile. Now I'll try to implement the hammer js.

Thank you @ZachSaucier for help!

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.