Scrollable

A layout pattern to create scrollable containers.

import { Scrollable } from "styled-system/jsx";

Usage

The Scrollable component provides an easy way to create scrollable containers without having to worry about overflow styles.

Direction

Use vertical or horizontal to control the overflow scrolling direction.

Scrollbar visibility

You can control the visibility of the scrollbar using the hideScrollbar prop.

Props

The Scrollable component supports all CSS properties as props, along with the following additional props:

Prop	Type	Description
`direction`	`'vertical' \| 'horizontal'`	Controls the overflow scrolling direction.
`hideScrollbar`	`boolean`	Hides the scrollbar.

On this page

Loading...

It was the best compliment that he'd ever received although the person who gave it likely never knew. It had been an off-hand observation on his ability to hold a conversation and actually add pertinent information to it on practically any topic. Although he hadn't consciously strived to be able to do so, he'd started to voraciously read the news when he couldn't keep up on topics his friends discussed because their conversations went above his head. The fact that someone had noticed enough to compliment him that he could talk intelligently about many topics meant that he had succeeded in his quest to be better informed.

import { Scrollable } from 'styled-system/jsx'
import { Text } from '@cerberus/react'

export function DirectionDemo() {
  return (
    <Scrollable direction="horizontal" w="3/4">
      <Text textWrap="nowrap">
        It was the best compliment that he&apos;d ever received although the person who
        gave it likely never knew. It had been an off-hand observation on his ability to
        hold a conversation and actually add pertinent information to it on practically
        any topic. Although he hadn&apos;t consciously strived to be able to do so,
        he&apos;d started to voraciously read the news when he couldn&apos;t keep up on
        topics his friends discussed because their conversations went above his head.
        The fact that someone had noticed enough to compliment him that he could talk
        intelligently about many topics meant that he had succeeded in his quest to be
        better informed.
      </Text>
    </Scrollable>
  )
}

import { Scrollable } from 'styled-system/jsx'
import { Text } from '@cerberus/react'

export function BasicDemo() {
  return (
    <Scrollable h="200px" w="3/4">
      <Text>
        It was the best compliment that he&apos;d ever received although the person who
        gave it likely never knew. It had been an off-hand observation on his ability to
        hold a conversation and actually add pertinent information to it on practically
        any topic. Although he hadn&apos;t consciously strived to be able to do so,
        he&apos;d started to voraciously read the news when he couldn&apos;t keep up on
        topics his friends discussed because their conversations went above his head.
        The fact that someone had noticed enough to compliment him that he could talk
        intelligently about many topics meant that he had succeeded in his quest to be
        better informed.
      </Text>
      <Text>
        The wolves stopped in their tracks, sizing up the mother and her cubs. It had
        been over a week since their last meal and they were getting desperate. The cubs
        would make a good meal, but there were high risks taking on the mother Grizzly.
        A decision had to be made and the wrong choice could signal the end of the pack.
      </Text>
    </Scrollable>
  )
}

import { Scrollable } from 'styled-system/jsx'
import { Text } from '@cerberus/react'

export function VisibiltyDemo() {
  return (
    <Scrollable hideScrollbar h="200px" w="3/4">
      <Text>
        It was the best compliment that he&apos;d ever received although the person who
        gave it likely never knew. It had been an off-hand observation on his ability to
        hold a conversation and actually add pertinent information to it on practically
        any topic. Although he hadn&apos;t consciously strived to be able to do so,
        he&apos;d started to voraciously read the news when he couldn&apos;t keep up on
        topics his friends discussed because their conversations went above his head.
        The fact that someone had noticed enough to compliment him that he could talk
        intelligently about many topics meant that he had succeeded in his quest to be
        better informed.
      </Text>
      <Text>
        The wolves stopped in their tracks, sizing up the mother and her cubs. It had
        been over a week since their last meal and they were getting desperate. The cubs
        would make a good meal, but there were high risks taking on the mother Grizzly.
        A decision had to be made and the wrong choice could signal the end of the pack.
      </Text>
    </Scrollable>
  )
}