ScrollArea

Area with custom scrollbars

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

ScrollArea component is based on Radix UI scroll area component. It is adapted to work well with light and dark color schemes and supports the following props:

type defines scrollbars behavior:
- hover – scrollbars are visible on hover
- scroll – scrollbars are visible on scroll
- auto – similar to overflow: auto – scrollbars are always visible whether the content is overflowing
- always – same as auto but scrollbars are always visible regardless of whether the content is overflowing
offsetScrollbars – offset scrollbars with padding
scrollbarSize – scrollbar size in px, controls scrollbar and thumb width/height
scrollHideDelay – delay in ms to hide scrollbars, applicable only when type is hover or scroll

Charizard (Pokémon)

Charizard description from Bulbapedia

Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.

As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.

Type

Offset scrollbars

ScrollbarSize

ScrollHideDelay

import { ScrollArea } from '@mantine/core';

function Demo() {
  return (
    <ScrollArea style={{ height: 250 }}>
      {/* ... content */}
    </ScrollArea>
  );
}

Horizontal scrollbars

Charizard (Pokémon)

Charizard description from Bulbapedia

import { ScrollArea } from '@mantine/core';

function Demo() {
  return (
    <ScrollArea style={{ width: 300, height: 200 }}>
      <div style={{ width: 600 }}>
        {/* ... content */}
      </div>
    </ScrollArea>
  );
}

Subscribe to scroll position changes

Provider onScrollPositionChange function to subscribe to scroll position changes, it will be called each time user scrolls with x and y coordinates:

Charizard (Pokémon)

Charizard description from Bulbapedia

Scroll position: { x: 0, y: 0 }

import { useState } from 'react';
import { Text, ScrollArea, Code } from '@mantine/core';

function Demo() {
  const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 });

  return (
    <>
      <ScrollArea
        style={{ width: 300, height: 200 }}
        onScrollPositionChange={onScrollPositionChange}
      >
        <div style={{ width: 600 }}>
          {/* ... content */}
        </div>
      </ScrollArea>

      <Text>
        Scroll position: <Code>{`{ x: ${scrollPosition.x}, y: ${scrollPosition.y} }`}</Code>
      </Text>
    </>
  );
}

Scroll to position

To programmatically scroll to any position, get viewport element ref with viewportRef prop and call scrollTo method:

Charizard (Pokémon)

Charizard description from Bulbapedia

import { useRef } from 'react';
import { ScrollArea, Button, Group } from '@mantine/core';

function Demo() {
  const viewport = useRef<HTMLDivElement>();

  const scrollToBottom = () =>
    viewport.current.scrollTo({ top: viewport.current.scrollHeight, behavior: 'smooth' });

  const scrollToCenter = () =>
    viewport.current.scrollTo({ top: viewport.current.scrollHeight / 2, behavior: 'smooth' });

  const scrollToTop = () => viewport.current.scrollTo({ top: 0, behavior: 'smooth' });

  return (
    <Group position="center" direction="column">
      <ScrollArea style={{ width: 300, height: 200 }} viewportRef={viewport}>
        {/* ... content */}
      </ScrollArea>

      <Group>
        <Button onClick={scrollToBottom} variant="outline">
          Scroll to bottom
        </Button>
        <Button onClick={scrollToCenter} variant="outline">
          Scroll to center
        </Button>
        <Button onClick={scrollToTop} variant="outline">
          Scroll to top
        </Button>
      </Group>
    </Group>
  );
}

Usage with other components

ScrollArea integrates seamlessly with all Mantine components that can require scrollbars. For example, it can be used with Navbar.Section component:

import { Navbar, ScrollArea } from '@mantine/core';

function Demo() {
  return (
    <Navbar height={600} p="xs" width={{ base: 300 }}>
      <Navbar.Section mt="xs">{/* Header with logo */}</Navbar.Section>

      <Navbar.Section grow component={ScrollArea} mx="-xs" px="xs">
        {/* scrollable content here */}
      </Navbar.Section>

      <Navbar.Section>{/* Footer with user */}</Navbar.Section>
    </Navbar>
  );
}

Go back

Portal – @mantine/core

Up next

Transition – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter