Changing scroll direction for each section

Issue

Now I’ve seen this page from webflow, which has inspired me much.

In this page, you start scrolling horizontally, then when you reach a certain area, the scrolling direction changes so that the page starts scrolling vertically.

Is there a way to do this?
(Preferably vanillaJS, but jQuery would be fine)

Solution

Basically there is not a set-up solution built into standards or jQuery (and I don’t really recommend to use jQuery). I haven’t searched if there is a library to do this (I suspect there is, and you should use one if possible instead of building by hand) but I’ll try to roughly explain what it uses in vanilla JS/CSS.

We can construct a really long element (that includes the contents you want to reveal by scrolling), and use some cropping mechanism so that only a portion of it is displayed. This is basically done with overflow: hidden;.

Next this long element should move with scrolling. Adding an onscroll event listener that adjusts the transform property (spefically, translate functions) would do that.

These element should behave magically: they scroll to a position, stop and stay there until they reach another scrolling position, where they continue to be scrolled away. This is accomplished with the position: sticky; CSS property. See what MDN says:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

This is somewhat hard to understand but the key is that it stays where it is as if it was a normal element until reaching the position you have set through top/bottom/left/right properties. Then it stays at that position until it’s scrolled away together with its parent element (the "nearest scrolling ancestor").

So now you have an element that

  • Is really long but has only a portion shown
  • Can move as mouse scrolls so that users see more as scrolling
  • Stays in a fixed position through a part of the page and then scrolled away

which is basically the effect you want.

These three steps are the basic building blocks of such fancy effects you mentioned. There should be of course many nasty implementation details that I haven’t outlined here but I hope this answer help you briefly catch what’s happening under the hood.

Answered By – daylily

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.