Scroll Area

Scroll Areas let you add custom, consistent scrollbars to any content. They're great for creating scrollable sections within your page.

Preview

Basic Usage

To use the Astra Scroll Area component, wrap your content with the <astra-scroll-area> tag:

<astra-scroll-area>
  <div class="h-[1200px] w-[2400px] bg-green-500">
    <!-- Your scrollable content here -->
  </div>
</astra-scroll-area>

Features

The Astra Scroll Area component offers some useful options:

Scroll Direction

Control the scroll direction using the axis attribute:

<astra-scroll-area axis="vertical">
  <!-- Vertical scrolling content -->
</astra-scroll-area>

<astra-scroll-area axis="horizontal">
  <!-- Horizontal scrolling content -->
</astra-scroll-area>

<astra-scroll-area axis="both">
  <!-- Both vertical and horizontal scrolling content -->
</astra-scroll-area>

Scroll Event Handling

Use the onScroll and threshold attributes to handle scroll events:

<astra-scroll-area onScroll="handleScroll" threshold="100">
  <!-- Scrollable content -->
</astra-scroll-area>

<script>
function handleScroll() {
  console.log('Scrolled more than 100 pixels');
}
</script>

Why Use Astra Scroll Area?

Consistency: Same look and feel across different browsers and devices.
Customization: Scrollbars that match your site's design.
Flexibility: Control over scroll direction and event handling.
Simplicity: Easy to implement with just a wrapper element.

Accessibility

The Astra Scroll Area component is built with accessibility in mind:

It uses native scrolling, ensuring compatibility with keyboard navigation and screen readers.
The custom scrollbars are purely visual and don't interfere with standard scrolling behavior.
Content within the scroll area remains accessible and can be interacted with normally.

Getting Started

Components