Scroll Principle

The scroll prop can be used to set up when a scroll bar should show. We provide the following scrolling options on our container components:

export interface ScrollProp {
  scroll?:
  | 'overflow' /** default */
  | 'both'
  | 'vertical'
  | 'horizontal'
  | 'hidden';
}

overflow

By default content will overflow its container. In the example below we force the container to be small (with explicit sizing 90px) and then throw a bunch of content inside it (note the lightpink sections are overflowing lightskyblue)

Live Editor

// force a small size container
<Column height={90} style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
</Column>

// force a small size container
<Column height={90} style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
</Column>

Result

info

There is no need to be alarmed by this default value. You normally don't use explicit size (covered in the scale principle). Content will overflow to the body, and the browser will add a scrollbar on the body for you (by default).

both | vertical | horizontal

Add scroll: 'both'| 'vertical' | 'horizontal' to finely control where you want your scroll bar to appear.

Some configuration handled for you:

The scrollbar will only show if the content actually overflows.
The scrolling section is touch-smooth-scroll enabled.

Here is an example where content doesn't overflow (and you don't see a scroll bar despite scroll='both'):

Live Editor

// force a small size container
<Column height={90} scroll='both' style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Not enough content to cause overflow</div>
</Column>

// force a small size container
<Column height={90} scroll='both' style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Not enough content to cause overflow</div>
</Column>

Result

Here is an example where content does overflow:

Live Editor

// force a small size container
<Column height={90} scroll='both' style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
</Column>

// force a small size container
<Column height={90} scroll='both' style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow</div>
</Column>

Result

You can use it to fine tune the scroll bar location e.g. below we want the header to stay outside the scroll bar:

Live Editor

<Column height={200} space={0} style={{backgroundColor: "lightskyblue"}}>

  {/* You want this header to stick to top */}
  <Content style={{backgroundColor: 'darkorange', textAlign: 'center', height: '50px', fontSize: '35px'}}>Header</Content>

  {/* You only want this section to scroll */}
  <Column scroll='both' scale='stretch'>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
  </Column>

</Column>

<Column height={200} space={0} style={{backgroundColor: "lightskyblue"}}>

  {/* You want this header to stick to top */}
  <Content style={{backgroundColor: 'darkorange', textAlign: 'center', height: '50px', fontSize: '35px'}}>Header</Content>

  {/* You only want this section to scroll */}
  <Column scroll='both' scale='stretch'>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
    <div style={{backgroundColor: 'lightpink'}}>Main section with lots of text to make it overflow</div>
  </Column>

</Column>

Result

hidden

It behaves exactly like you would expect, cutting off overflowing content and not letting you scroll to it:

Live Editor

// force a small size container
<Column height={90} scroll='hidden' style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow, but it will get hidden</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow, but it will get hidden</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow, but it will get hidden</div>
</Column>

// force a small size container
<Column height={90} scroll='hidden' style={{backgroundColor: "lightskyblue"}}>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow, but it will get hidden</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow, but it will get hidden</div>
  <div style={{backgroundColor: 'lightpink'}}>Lots of content to make it overflow, but it will get hidden</div>
</Column>

Result

Example use case - Clipping an image at the border, a common pattern in landing pages:

Live Editor

<>
{/** use scroll hidden to clip the image at the bottom of this section */}
<Column height={100} scroll='hidden' style={{backgroundColor: "lightskyblue", position: 'relative'}}>
  Cute kitten at bottom
  <img 
    style={{borderRadius: '50%', position: 'absolute', right: '20px', bottom: '-20px'}}
    src='http://placekitten.com/g/80/80' />
</Column>
<Column height={100} style={{backgroundColor: "lightpink"}}>
  Next section
</Column>
</>

<>
{/** use scroll hidden to clip the image at the bottom of this section */}
<Column height={100} scroll='hidden' style={{backgroundColor: "lightskyblue", position: 'relative'}}>
  Cute kitten at bottom
  <img 
    style={{borderRadius: '50%', position: 'absolute', right: '20px', bottom: '-20px'}}
    src='http://placekitten.com/g/80/80' />
</Column>
<Column height={100} style={{backgroundColor: "lightpink"}}>
  Next section
</Column>
</>

Result

Scroll Principle

overflow​

both | vertical | horizontal​

hidden​

overflow

both | vertical | horizontal

hidden