Scroll Area component purpose
Scroll Area augments native scroll functionality for custom, cross-browser styling.
Radix Primitives · all subjects
scroll-area
27 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Scroll Area anatomy parts
Scroll Area is composed of five parts: Root (contains all parts), Viewport (the viewport area), Scrollbar (vertical or horizontal, contains Thumb), Thumb (the draggable part of the scrollbar), and Corner (where vertical and horizontal scrollbars meet).
Scroll Area key features
Scroll Area has four key features: Scrollbar sits on top of the scrollable content, taking up no space. Scrolling is native; no underlying position movements via CSS transformations. Shims pointer behaviors only when interacting with the controls, so keyboard controls are unaffected. Supports Right to Left direction.
Scroll Area Root component props
Root component props: asChild (boolean, default false, optional), type (enum: 'auto' | 'always' | 'scroll' | 'hover', default 'hover'), scrollHideDelay (number, default 600, determines milliseconds before scrollbars are hidden after user stops interacting with type 'scroll' or 'hover'), dir (enum: 'ltr' | 'rtl', optional, inherits from DirectionProvider or defaults to LTR), nonce (string, optional, passed to inline styles for CSP-enabled environments).
Scroll Area type prop values explained
'auto' means scrollbars are visible when content is overflowing on the corresponding orientation. 'always' means scrollbars are always visible regardless of whether content is overflowing. 'scroll' means scrollbars are visible when the user is scrolling along its corresponding orientation. 'hover' means scrollbars are visible when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.
Scroll Area Viewport props
Viewport component has one prop: asChild (boolean, default false, optional).
Scroll Area Scrollbar props
Scrollbar component props: asChild (boolean, default false, optional), forceMount (boolean, used to force mounting when more control is needed, useful when controlling animation with React animation libraries), orientation (enum: 'horizontal' | 'vertical', default 'vertical', optional).
Scroll Area Scrollbar data attributes
Scrollbar component has two data attributes: [data-state] with values 'visible' or 'hidden', and [data-orientation] with values 'vertical' or 'horizontal'.
Scroll Area Thumb props
Thumb component has one prop: asChild (boolean, default false, optional).
Scroll Area Thumb data attributes
Thumb component has one data attribute: [data-state] with values 'visible' or 'hidden'.
Scroll Area Corner props
Corner component has one prop: asChild (boolean, default false, optional).
Scroll Area accessibility and keyboard support
Scroll Area maintains the browser's native scroll behavior and accessibility features, including keyboard scrolling. Scrolling via keyboard is supported by default because the component relies on native scrolling. Specific keyboard interactions may differ between platforms, so they are not specified or handled by specific event listeners.
Scroll Area composition example
import { ScrollArea } from "radix-ui"; export default () => ( <ScrollArea.Root> <ScrollArea.Viewport /> <ScrollArea.Scrollbar orientation="horizontal"> <ScrollArea.Thumb /> </ScrollArea.Scrollbar> <ScrollArea.Scrollbar orientation="vertical"> <ScrollArea.Thumb /> </ScrollArea.Scrollbar> <ScrollArea.Corner /> </ScrollArea.Root> ); This example shows the complete anatomy of a Scroll Area component with both horizontal and vertical scrollbars.
Scroll Area corner width/height CSS custom properties
Fixed --radix-scroll-area-corner-width and --radix-scroll-area-corner-height not resetting to 0 when a corner is removed. Previously these values would stick around and leave a permanent gap on the remaining scrollbar.
Scroll Area scrollbar data-state attribute
Fixed a missing data-state attribute for Scroll Area scrollbars.
Scroll Area asChild on Viewport
Fixed asChild prop not working as expected on the Scroll Area Viewport.
Scroll Area Viewport internal styles fix
Updated internal styles to fix other issues with Scroll Area Viewport.
Scroll Area nonce prop CSP
Add nonce prop to Scroll Area to be able to pass CSP nonce to the inline styles.
ScrollArea.Thumb is animatable
ScrollArea.Thumb can now be animated.
ScrollArea complete API redesign in June 2021
ScrollArea received a complete redesign with a simpler API. Key changes include: removed overflowX and overflowY props; renamed scrollbarVisibility to type (accepting 'auto', 'always', 'scroll', or 'hover'); renamed scrollbarVisibilityRestTimeout to scrollHideDelay; removed trackClickBehavior prop; changed ScrollAreaScrollbarX and ScrollAreaScrollbarY to ScrollAreaScrollbar with orientation prop; removed ScrollAreaButtonStart, ScrollAreaButtonEnd, and ScrollAreaTrack; improved Safari and RTL support; improved touch support; Scrollbar mount/unmount can now be animated; added minimum width/height to thumb for consistent grabbability; moved functional CSS into component.
Scroll Area custom-styled scrollable area
Scroll Area is a component for creating custom-styled scrollable areas using native functionality.
Scroll Area size prop controls scrollbar handle size
The size prop controls the size of the scrollbar handles. The component supports size values 1, 2, and 3.
Scroll Area radius prop assigns handle radius
The radius prop assigns a specific border radius to the scrollbar handles. Supported values include 'none' and 'full'.
Scroll Area scrollbars prop limits scrollable axes
The scrollbars prop limits which axes can be scrolled. Supported values are 'vertical' and 'horizontal'.
Scroll Area type prop controls scrollbar visibility
The type prop controls when scrollbars are displayed. The value 'always' ensures scrollbars are always visible.
Scroll Area inherits from Root and Viewport parts
The Scroll Area component inherits props from the ScrollArea primitive Root and Viewport parts.
Scroll Area supports common margin props
Scroll Area supports common margin props for layout control.