Skip to content

ScrollArea

Description

ScrollArea is a component that allows you to customize the native scroll functionality. It enables smooth navigation through content within a window or block, both vertically and horizontally.

Component composition

The ScrollArea consists of the following elements:

  • Container with content (ScrollArea.Container).
  • Scroll indicator (ScrollArea.Bar).
  • Slider (ScrollArea.Bar.Slider).

Styles

ScrollArea styles
ElementStyles
ScrollArea.Barbackground: transparent
ScrollArea.Bar.Sliderbackground: var(--scroll-bar-background)

Interaction

Scrolling inside the block can be controlled by:

  • Mouse wheel.
  • Arrow keys while focusing on an element.
  • Touchpad gestures.
  • Elements of a scrollbar such as sliders and buttons.

:::

Last updated:

Released under the MIT License.

Released under the MIT License.