---
name: Scrolling principle
route: /principle-scrolling/
---

import { Playground } from 'docz';
import { Vertical, Content, Horizontal } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Scrolling

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:

```ts
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 80px) and then throw a bunch of content inside it.

<Playground>
  {/* force a small size container */}
  <Vertical height={80} 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>
  </Vertical>
</Playground>

> There is no need to be alarmed by this default value. You normally *don't use explicit sizing* (covered in the [sizing principle][principle-sizing]). 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'`): 

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

Here is an example where content does overflow: 

<Playground>
  {/* force a small size container */}
  <Vertical height={80} 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>
  </Vertical>
</Playground>

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

<Playground>
  <Vertical height={200} spacing={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 */}
    <Vertical scroll='both' sizing='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>
    </Vertical>

  </Vertical>
</Playground>

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

<Playground>
  {/* force a small size container */}
  <Vertical height={80} 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>
  </Vertical>
</Playground>

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

<Playground>
  {/* use scroll hidden to clip the image at the bottom of this section */}
  <Vertical 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' />
  </Vertical>
  <Vertical height={100} style={{backgroundColor: "lightpink"}}>
    Next section
  </Vertical>
</Playground>

[principle-sizing]:../principle-sizing/