Scroll area
A component that provides a customizable scrollable area with a custom scrollbar.
Examples
You can use the scroll area component to create a scrollable area for both horizontal and vertical content. Use the orientation property to set the orientation of the scroll area.
<dap-ds-stack direction="row" spacing="700">
<dap-ds-scroll-area
style={{ width: 200, height: 300 }}
orientation="horizontal"
>
<div style={{ whiteSpace: 'nowrap' }}>
Very long horizontal scrollable content ,yes it is very long, try to scroll
</div>
</dap-ds-scroll-area>
<dap-ds-scroll-area
style={{ width: 200, height: 300 }}
orientation="vertical"
>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
</dap-ds-scroll-area>
<dap-ds-scroll-area
style={{ width: 200, height: 300 }}
orientation="both"
>
<div style={{ whiteSpace: 'nowrap' }}>
Very long horizontal scrollable content ,yes it is very long, try to scroll
</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
<div>A lot of horizontal content</div>
</dap-ds-scroll-area>
</dap-ds-stack>
| Property | Type | Default | Description |
|---|
orientation | 'vertical', 'horizontal' , 'both' | 'vertical' | The orientation of the scrollbar. |
Slots
| Name | Description |
|---|
(default) | The content to be scrolled |
Events
No custom events available.
CSS Parts
| Part Name | Description |
|---|
viewport | The viewport element that contains the scrollable content |
scrollbar | The scrollbar container |
corner | The corner between vertical and horizontal scrollbars |
CSS Custom Properties
| Property Name | Description |
|---|
--dds-scroll-area-radius | The border radius of the scroll area and its elements (default: var(--dds-radius-base)) |
--dds-scroll-area-background | The background color of the scroll area (default: var(--dds-background-neutral-base)) |
--dds-scroll-area-scrollbar-background | The background color of the scrollbar (default: var(--dds-background-neutral-subtle)) |
--dds-scroll-area-thumb-background | The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive)) |
--dds-scroll-area-thumb-hover-background | The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover)) |
--dds-scroll-area-thumb-active-background | The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active)) |
--dds-scroll-area-transition | The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out)) |
--dds-scroll-area-scrollbar-size | The width/height of the scrollbar (default: 10px) |
