Scroll Containers


Lesson Length -


Scroll Containers are used in almost every Judo experience.
Close Video

Let's Use A Scroll Container

Scroll Containers are how they sound - areas where the user will be scrolling through content.

We can add a Scroll Container element three different ways:

  • add one from our Insert Menu and then drag our layer(s) we want inside to be nested underneath, or alternatively we can:
  • select a layer (or multiple layers) we want to be in a Scroll Container, and then from the top menu select Arrange > Embed In > Scroll Container.
  • we'll also notice is that in Judo a new Screen is always accompanied by a Scroll Container, assuming we’ll need one.

Vertical vs Horizontal

By default, a Scroll Container is a Vertical Scroll Container, which is used when our overall content for the screen is going to flow past the bottom of the screen.

On our screen, elements in a Vertical Scroll Container are spaced differently than only in a VStack or directly on our screen, in that they will be pushed up to the top of our screen and take up as little vertical space as possible.

To change it to a Horizontal Scroll Container, simply change the Scroll Direction in our Inspector Panel:

Once changed to Horizontal, each layer (whatever that layer is) that is nested directly below our Scroll Container element will become a horizontal section in our scroll area.

A Horizontal scroll container is most common for scrolling through tiles of content:

With Horizontal Scroll Containers, make sure that your first tile is less than the width of the screen, keeping in mind here that 320 is the smallest screen to design for.

Now we have a mobile experience that feels very familiar to other of the worlds most famous content apps with just a few clicks.

Was this lesson helpful?