An Infinitely Scrollable Vertical Menu

Note: from now on I’m planning to release simple “components” and explain their basic working principle in tiny articles. In this first one I’m going to look at the infinite looping scroll illusion.

A while back a came across a really nice menu on Madeleine Dalla’s incredible website that was infinitely scrollable. I wondered how that was achieved and after searching for existing solutions, I found this great demo by Vincent Orback on Codepen. It shows how to pull off that effect with sections on a page. I wanted to use his script to make it work for a menu.

The principle of how this works is not too complicated: there’s a bunch of menu items that we need to clone in order to make sure that we have enough items to create a scroll illusion. The illusion works like this: once we scroll and reach the cloned items, we reset the scroll position to 0. So, as soon as the same (visual) point is reached, we jump back to the beginning.

How many clones do we need? We need as many clones as items fit into the visible area. As an example, if 8 items fit into the height of the viewport, than we need to create 8 clones.

The amount of menu items is important when considering how much space they’ll take up on the screen (or scroll area). If your items don’t fill the screen fully, the illusion will break. So you need to make sure to have enough and to set a reasonable font size for the items to occupy enough space.

We let the menu be scrollable but we hide the scrollbar. The menu is covering the whole viewport and this is the element we scroll.

Tip: if you want to visualize the illusion, just make sure that the scrollbar is not hidden. You’ll see it jumping back to the top, once the “cloned” zone is reached. Just delete:

::-webkit-scrollbar {
  display: none;
}

… and the line scrollbar-width: none; for Firefox.

Note that I use a fallback for mobile where I simply want to show the complete menu.

Hope you find this little component useful!