Advice and answers from the Atomic Team

Containers let you create horizontally and vertically scrollable areas of content. You can have multiple scrollable Containers on a page, or even have scrollable Containers nested inside other scrollable Containers.

How to create a scrollable region

  1. Select the elements you'd like in your scroll container and up the top select 'Scroll' (Create scroll container).
  2. Choose your scroll direction in the properties panel under Behaviour (Vertically, Horizontally or Both)
  3. Resize the boundary of the Container to the scrollable region on your page. The contents of your Container need to be clipped to enable scrolling.

There are a few ways to create a container:

Select elements on the canvas, the select Scroll to create a scrollable container.

Group your elements, then select Convert to Container from the properties panel

Select the Container tool from the left toolbar, draw a container, then move elements into the container by dragging the layers in the layers panel

To directly select any element within a container, hold Cmd (or Ctrl if on Windows) and click the element. This will reveal any elements outside the container boundary, making it easy to reposition elements or see what’s inside the container.

To release a container's elements, ungroup the container using keyboard shortcut (Cmd + Shift + G) or selecting Ungroup from the top menu.

Scrolling vertically, horizontally, or in both directions

To scroll vertically: Select ‘Vertically’ from the Scroll dropdown and resize your container from the bottom, to hide the area you want to scroll to.

To scroll horizontally: Select ‘Horizontally’ from the Scroll dropdown, resize your container from the right hand side, to hide the area you want to scroll to.

To scroll both vertically and horizontally: Select ‘Both’ from the Scroll dropdown, resize your container from the bottom and right hand side, to hide the area you want to scroll to.

Note: You can currently only scroll to content clipped and positioned at the bottom or right side of a container. It is not yet possible to scroll up from the bottom or to the left.

Fixed positioning of elements

Any elements placed inside the container will scroll, including hotspots. If you’d like to create a fixed element (for example a header or footer), make sure that the element is placed outside of the container.

Animating scrolling containers

You can animate the position of a container, or adjust its boundary between pages to expand or contract the scrollable area. Animations and transitions within containers will work as normal, but note that you’ll need to create the container before copying the elements across pages, to ensure your elements are linked.

If you want an area within your container to be interactive, we recommend placing the hotspot inside the container. Any hotspots placed on top of a container will not scroll with the container. They will also block that area of the prototype from being scrollable.

Scrolling on mobile

Scrolling containers will have a native bounce and friction feel when scrolling on a mobile device. Check out our sample on your mobile device.

How to disable scrollbars

While you can't yet disable scrollbars from appearing, you can hide them from view. This can be done either by wrapping the scroll container in a mask, or by offsetting the boundary with the scroll container off canvas. Take a look at this sample.


Next →
Page position

Related articles:

Did this answer your question?