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>
Importing 
import { DapDSScrollArea } from 'dap-design-system'
Importing React 
import { DapDSScrollAreaReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSScrollArea } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
orientation'vertical', 'horizontal' , 'both''vertical'The orientation of the scrollbar.
Slots
NameDescription
(default)The content to be scrolled
Events

No custom events available.

CSS Parts
Part NameDescription
viewportThe viewport element that contains the scrollable content
scrollbarThe scrollbar container
cornerThe corner between vertical and horizontal scrollbars
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-scroll-area::part(viewport) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-scroll-area::part(viewport),
.my-custom-dap-ds-scroll-area::part(scrollbar) {
  /* Shared styles */
}

Example usage:

<dap-ds-scroll-area class="my-custom-dap-ds-scroll-area">
  Scroll area
</dap-ds-scroll-area>

.my-custom-dap-ds-scroll-area::part(viewport) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties
Property NameDescription
--dds-scroll-area-radiusThe border radius of the scroll area and its elements (default: var(--dds-radius-base))
--dds-scroll-area-backgroundThe background color of the scroll area (default: var(--dds-background-neutral-base))
--dds-scroll-area-scrollbar-backgroundThe background color of the scrollbar (default: var(--dds-background-neutral-subtle))
--dds-scroll-area-thumb-backgroundThe background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive))
--dds-scroll-area-thumb-hover-backgroundThe background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover))
--dds-scroll-area-thumb-active-backgroundThe background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active))
--dds-scroll-area-transitionThe transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out))
--dds-scroll-area-scrollbar-sizeThe width/height of the scrollbar (default: 10px)
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-scroll-area
  style="--dds-scroll-area-radius: value; --dds-scroll-area-background: value;">
  Scroll area
</dap-ds-scroll-area>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-scroll-area {
  --dds-scroll-area-radius: value;
  --dds-scroll-area-background: value;
  --dds-scroll-area-scrollbar-background: value;
}

<dap-ds-scroll-area class="my-custom-dap-ds-scroll-area">
  Scroll area
</dap-ds-scroll-area>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-scroll-area {
  --dds-scroll-area-radius: value;
  --dds-scroll-area-background: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.