A component that provides a customizable scrollable area with a custom scrollbar.

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: 200px; height: 300px"
    orientation="horizontal"
  >
    <div style="white-space: 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: 200px; height: 300px"
    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: 200px; height: 300px"
    orientation="both"
  >
    <div style="white-space: 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>

Import the component by its own subpath. This registers <dap-ds-scroll-area> (and the components it renders internally) and lets your bundler include only what you use:

import 'dap-design-system/components/scroll-area'

Need a reference to the class (e.g. to register it manually or extend it)? The same subpath default-exports it:

import DapDSScrollArea from 'dap-design-system/components/scroll-area'

Register the whole library at once — convenient, but pulls every component into your bundle:

import 'dap-design-system'

import { DapDSScrollAreaReact } from 'dap-design-system/react'

No custom events available.

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 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;
}