Scrollable

A layout pattern to create scrollable containers.

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

const Demo = () => {
  return (
    <Scrollable h="200px">
      <Box bgColor="page.surface.100" color="white" padding="4"  width="full" >
        This is the Box
      </Box>
    </Scrollable>
  )
}

Usage

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

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

<Scrollable />

Examples

Direction

Use vertical or horizontal to control the overflow scrolling direction.

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

const Demo = () => {
  return (
    <Scrollable direction="horizontal" w="200px">
      This is horizontal scrolling content.
    </Scrollable>
  )
}

Scrollbar visibility

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

import { Scrollable } from "styled-system/jsx";
const Demo = () => {
  return (
    <Scrollable hideScrollbar>
      This is content with a hidden scrollbar.
    </Scrollable>
  )
}

Props

The Box component supports all CSS properties as props, making it easy to style elements.

On this page

Edit this page on Github