BlueStack.io - Component Library

scroll Component

📐 Align UI Design Reference

File: Align UI ✦ Design System [1.1]
Page: Scroll
Scrollbar Sizes: 12px (x-small), 16px (small), 20px (medium)
Styles: Default (white bg, light scrollbar) and Lighter (gray bg, darker scrollbar)
Features: Webkit and Firefox scrollbar styling, smooth scrolling, touch support

Overview

Customizable scrollbar component that styles native browser scrollbars for vertical and horizontal scrolling containers. Supports multiple sizes, style variants, and responsive behavior with full accessibility support.

Size Variants

Tiny (10px scrollbar)

Preview Code

Copy

Tiny Scrollbar

Perfect for compact interfaces and minimal designs.

• Compact 10px scrollbar width
• Ideal for sidebars
• Minimal visual weight
• Mobile-friendly
• Best for small containers
• Less obtrusive design
• Saves screen space
• Modern aesthetic

<div class="scroll tiny" style="max-height: 200px">
  <div class="content">
    <h5 class="font-semibold mb-2">Tiny Scrollbar</h5>
    <p class="text-gray-600 mb-4">Perfect for compact interfaces and minimal designs.</p>
    <ul class="space-y-2 text-gray-600">
      <li>• Compact 10px scrollbar width</li>
      <li>• Ideal for sidebars</li>
      <li>• Minimal visual weight</li>
      <li>• Mobile-friendly</li>
      <li>• Best for small containers</li>
      <li>• Less obtrusive design</li>
      <li>• Saves screen space</li>
      <li>• Modern aesthetic</li>
    </ul>
  </div>
</div>

Small (12px scrollbar)

Preview Code

Copy

Small Scrollbar

Great balance between visibility and subtlety.

• Standard 12px scrollbar width
• Good for most use cases
• Balanced visibility
• Works well on tablets
• Commonly used size
• Easy to interact with
• Not too prominent
• Versatile option

<div class="scroll small" style="max-height: 200px">
  <div class="content">
    <h5 class="font-semibold mb-2">Small Scrollbar</h5>
    <p class="text-gray-600 mb-4">Great balance between visibility and subtlety.</p>
    <ul class="space-y-2 text-gray-600">
      <li>• Standard 12px scrollbar width</li>
      <li>• Good for most use cases</li>
      <li>• Balanced visibility</li>
      <li>• Works well on tablets</li>
      <li>• Commonly used size</li>
      <li>• Easy to interact with</li>
      <li>• Not too prominent</li>
      <li>• Versatile option</li>
    </ul>
  </div>
</div>

Default (16px scrollbar)

Preview Code

Copy

Default Scrollbar

Standard size for most applications. No class needed - this is the default!

Key Features

• Comfortable 16px scrollbar width
• Optimal for desktop interfaces
• Easy to grab and drag
• Clear visual indicator
• Accessible for all users
• WCAG compliant sizing
• Cross-browser consistent
• Recommended standard

Use Cases

Perfect for content areas, document viewers, list containers, and general-purpose scrolling.

<div class="scroll" style="max-height: 250px">
  <div class="content">
    <h5 class="font-semibold mb-2">Default Scrollbar</h5>
    <p class="text-gray-600 mb-4">
      Standard size for most applications. No class needed - this is the default!
    </p>

    <h6 class="font-semibold mt-4 mb-2">Key Features</h6>
    <ul class="space-y-2 text-gray-600">
      <li>• Comfortable 16px scrollbar width</li>
      <li>• Optimal for desktop interfaces</li>
      <li>• Easy to grab and drag</li>
      <li>• Clear visual indicator</li>
      <li>• Accessible for all users</li>
      <li>• WCAG compliant sizing</li>
      <li>• Cross-browser consistent</li>
      <li>• Recommended standard</li>
    </ul>

    <h6 class="font-semibold mt-4 mb-2">Use Cases</h6>
    <p class="text-gray-600">
      Perfect for content areas, document viewers, list containers, and general-purpose scrolling.
    </p>
  </div>
</div>

<div class="scroll" style="max-height: 250px;">
                <div class="content">
                    <h5 class="font-semibold mb-2">Default Scrollbar</h5>
                    <p class="text-gray-600 mb-4">Standard size for most applications. No class needed - this is the default!</p>

<h6 class="font-semibold mt-4 mb-2">Key Features</h6>
                    <ul class="space-y-2 text-gray-600">
                        <li>• Comfortable 16px scrollbar width</li>
                        <li>• Optimal for desktop interfaces</li>
                        <li>• Easy to grab and drag</li>
                        <li>• Clear visual indicator</li>
                        <li>• Accessible for all users</li>
                        <li>• WCAG compliant sizing</li>
                        <li>• Cross-browser consistent</li>
                        <li>• Recommended standard</li>
                    </ul>

<h6 class="font-semibold mt-4 mb-2">Use Cases</h6>
                    <p class="text-gray-600">Perfect for content areas, document viewers, list containers, and general-purpose scrolling.</p>
                </div>
            </div>

Large (20px scrollbar)

Preview Code

Copy

Large Scrollbar

More prominent scrollbar for better visibility and easier interaction.

• Prominent 20px scrollbar width
• Excellent visibility
• Very easy to target
• Great for touch interfaces
• Accessibility-focused
• Clear visual feedback
• Good for presentations
• High contrast option

<div class="scroll large" style="max-height: 250px">
  <div class="content">
    <h5 class="font-semibold mb-2">Large Scrollbar</h5>
    <p class="text-gray-600 mb-4">
      More prominent scrollbar for better visibility and easier interaction.
    </p>
    <ul class="space-y-2 text-gray-600">
      <li>• Prominent 20px scrollbar width</li>
      <li>• Excellent visibility</li>
      <li>• Very easy to target</li>
      <li>• Great for touch interfaces</li>
      <li>• Accessibility-focused</li>
      <li>• Clear visual feedback</li>
      <li>• Good for presentations</li>
      <li>• High contrast option</li>
    </ul>
  </div>
</div>

Big (24px scrollbar)

Preview Code

Copy

Big Scrollbar

Maximum visibility and easiest interaction for accessibility.

• Extra large 24px scrollbar width
• Maximum visibility
• Easiest to interact with
• Perfect for accessibility needs
• Touch-optimized design
• High DPI screen friendly
• Kiosk mode interfaces
• Senior-friendly design

<div class="scroll big" style="max-height: 250px">
  <div class="content">
    <h5 class="font-semibold mb-2">Big Scrollbar</h5>
    <p class="text-gray-600 mb-4">Maximum visibility and easiest interaction for accessibility.</p>
    <ul class="space-y-2 text-gray-600">
      <li>• Extra large 24px scrollbar width</li>
      <li>• Maximum visibility</li>
      <li>• Easiest to interact with</li>
      <li>• Perfect for accessibility needs</li>
      <li>• Touch-optimized design</li>
      <li>• High DPI screen friendly</li>
      <li>• Kiosk mode interfaces</li>
      <li>• Senior-friendly design</li>
    </ul>
  </div>
</div>

Style Variants

Default Style (White Background)

Preview Code

Copy

Default Style

Clean white background with light gray scrollbar. Most commonly used for content areas.

• White background (##ffffff)
• Light gray scrollbar (##ebebeb)
• Subtle hover effect
• Clean appearance
• Most common style
• Professional look
• High contrast text
• Easy to read

<div class="scroll" style="max-height: 300px">
  <div class="content">
    <h5 class="font-semibold mb-2">Default Style</h5>
    <p class="text-gray-600 mb-4">
      Clean white background with light gray scrollbar. Most commonly used for content areas.
    </p>
    <ul class="space-y-2 text-gray-600">
      <li>• White background (##ffffff)</li>
      <li>• Light gray scrollbar (##ebebeb)</li>
      <li>• Subtle hover effect</li>
      <li>• Clean appearance</li>
      <li>• Most common style</li>
      <li>• Professional look</li>
      <li>• High contrast text</li>
      <li>• Easy to read</li>
    </ul>
  </div>
</div>

Subtle Style (Gray Background)

Preview Code

Copy

Subtle Style

Soft gray background with darker scrollbar. Great for sidebars and secondary content.

• Gray background (##f7f7f7)
• Darker gray scrollbar (##d1d1d1)
• More prominent hover
• Minimalistic design
• Less distracting
• Good for sidebars
• Blends with UI
• Modern aesthetic

<div class="scroll subtle" style="max-height: 300px">
  <div class="content">
    <h5 class="font-semibold mb-2">Subtle Style</h5>
    <p class="text-gray-600 mb-4">
      Soft gray background with darker scrollbar. Great for sidebars and secondary content.
    </p>
    <ul class="space-y-2 text-gray-600">
      <li>• Gray background (##f7f7f7)</li>
      <li>• Darker gray scrollbar (##d1d1d1)</li>
      <li>• More prominent hover</li>
      <li>• Minimalistic design</li>
      <li>• Less distracting</li>
      <li>• Good for sidebars</li>
      <li>• Blends with UI</li>
      <li>• Modern aesthetic</li>
    </ul>
  </div>
</div>

Horizontal Scrolling

Horizontal Scroll with Cards

Preview Code

Copy

Card 1

Horizontal scrolling example with cards.

Card 2

Scroll horizontally to see more cards.

Card 3

Great for image galleries and carousels.

Card 4

Supports touch gestures on mobile.

Card 5

Smooth scrolling with momentum.

Card 6

Last card in this example.

<div class="scroll horizontal large" style="width: 100%">
  <div class="content">
    <div class="inline-flex gap-4">
      <div class="flex-shrink-0 w-64 p-6 bg-blue-50 rounded-lg border border-blue-200">
        <h5 class="font-semibold text-blue-900 mb-2">Card 1</h5>
        <p class="text-blue-700">Horizontal scrolling example with cards.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-green-50 rounded-lg border border-green-200">
        <h5 class="font-semibold text-green-900 mb-2">Card 2</h5>
        <p class="text-green-700">Scroll horizontally to see more cards.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-purple-50 rounded-lg border border-purple-200">
        <h5 class="font-semibold text-purple-900 mb-2">Card 3</h5>
        <p class="text-purple-700">Great for image galleries and carousels.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-orange-50 rounded-lg border border-orange-200">
        <h5 class="font-semibold text-orange-900 mb-2">Card 4</h5>
        <p class="text-orange-700">Supports touch gestures on mobile.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-pink-50 rounded-lg border border-pink-200">
        <h5 class="font-semibold text-pink-900 mb-2">Card 5</h5>
        <p class="text-pink-700">Smooth scrolling with momentum.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-yellow-50 rounded-lg border border-yellow-200">
        <h5 class="font-semibold text-yellow-900 mb-2">Card 6</h5>
        <p class="text-yellow-700">Last card in this example.</p>
      </div>
    </div>
  </div>
</div>

<div class="scroll horizontal large" style="width: 100%;">
                <div class="content">
                    <div class="inline-flex gap-4">
                        <div class="flex-shrink-0 w-64 p-6 bg-blue-50 rounded-lg border border-blue-200">
                            <h5 class="font-semibold text-blue-900 mb-2">Card 1</h5>
                            <p class="text-blue-700">Horizontal scrolling example with cards.</p>
                        </div>
                        <div class="flex-shrink-0 w-64 p-6 bg-green-50 rounded-lg border border-green-200">
                            <h5 class="font-semibold text-green-900 mb-2">Card 2</h5>
                            <p class="text-green-700">Scroll horizontally to see more cards.</p>
                        </div>
                        <div class="flex-shrink-0 w-64 p-6 bg-purple-50 rounded-lg border border-purple-200">
                            <h5 class="font-semibold text-purple-900 mb-2">Card 3</h5>
                            <p class="text-purple-700">Great for image galleries and carousels.</p>
                        </div>
                        <div class="flex-shrink-0 w-64 p-6 bg-orange-50 rounded-lg border border-orange-200">
                            <h5 class="font-semibold text-orange-900 mb-2">Card 4</h5>
                            <p class="text-orange-700">Supports touch gestures on mobile.</p>
                        </div>
                        <div class="flex-shrink-0 w-64 p-6 bg-pink-50 rounded-lg border border-pink-200">
                            <h5 class="font-semibold text-pink-900 mb-2">Card 5</h5>
                            <p class="text-pink-700">Smooth scrolling with momentum.</p>
                        </div>
                        <div class="flex-shrink-0 w-64 p-6 bg-yellow-50 rounded-lg border border-yellow-200">
                            <h5 class="font-semibold text-yellow-900 mb-2">Card 6</h5>
                            <p class="text-yellow-700">Last card in this example.</p>
                        </div>
                    </div>
                </div>
            </div>

Container-Level Inheritance

Using .scrolls Container

Preview Code

Copy

Inherited Small + Subtle

This scroll inherits small size and subtle style from the parent .scrolls container.

• No classes needed on children
• Consistent styling across group
• Easy to maintain
• DRY principle

Also Inherited

This scroll also inherits the same properties automatically.

• Same size and style
• No duplication needed
• Clean markup
• Scalable approach

<div class="scrolls small subtle space-y-4">
  <div class="scroll" style="max-height: 150px">
    <div class="content">
      <h5 class="font-semibold mb-2">Inherited Small + Subtle</h5>
      <p class="text-gray-600">
        This scroll inherits <strong>small</strong> size and <strong>subtle</strong> style from the
        parent <code>.scrolls</code> container.
      </p>
      <ul class="space-y-1 text-sm text-gray-600 mt-2">
        <li>• No classes needed on children</li>
        <li>• Consistent styling across group</li>
        <li>• Easy to maintain</li>
        <li>• DRY principle</li>
      </ul>
    </div>
  </div>

  <div class="scroll" style="max-height: 150px">
    <div class="content">
      <h5 class="font-semibold mb-2">Also Inherited</h5>
      <p class="text-gray-600">This scroll also inherits the same properties automatically.</p>
      <ul class="space-y-1 text-sm text-gray-600 mt-2">
        <li>• Same size and style</li>
        <li>• No duplication needed</li>
        <li>• Clean markup</li>
        <li>• Scalable approach</li>
      </ul>
    </div>
  </div>
</div>

<div class="scrolls small subtle space-y-4">
                <div class="scroll" style="max-height: 150px;">
                    <div class="content">
                        <h5 class="font-semibold mb-2">Inherited Small + Subtle</h5>
                        <p class="text-gray-600">This scroll inherits <strong>small</strong> size and <strong>subtle</strong> style from the parent <code>.scrolls</code> container.</p>
                        <ul class="space-y-1 text-sm text-gray-600 mt-2">
                            <li>• No classes needed on children</li>
                            <li>• Consistent styling across group</li>
                            <li>• Easy to maintain</li>
                            <li>• DRY principle</li>
                        </ul>
                    </div>
                </div>

<div class="scroll" style="max-height: 150px;">
                    <div class="content">
                        <h5 class="font-semibold mb-2">Also Inherited</h5>
                        <p class="text-gray-600">This scroll also inherits the same properties automatically.</p>
                        <ul class="space-y-1 text-sm text-gray-600 mt-2">
                            <li>• Same size and style</li>
                            <li>• No duplication needed</li>
                            <li>• Clean markup</li>
                            <li>• Scalable approach</li>
                        </ul>
                    </div>
                </div>
            </div>

Size & Style Configuration

Available size and style modifiers:

Sizes: tiny, small, default (no class), large, big

Styles: default (no class), subtle

Direction: vertical (default), horizontal

Container: <div class="scrolls [size] [style]"> - Children inherit properties

Note: Scroll containers require a fixed max-height (vertical) or width (horizontal) to enable scrolling.

JavaScript API

// Create scroll programmatically
const scroll = hygge.scroll.create({
  content: '<p>Dynamic content</p>',
  size: 'small',
  style: 'subtle',
  maxHeight: '300px',
  parent: document.body
});

// Scroll to specific position
hygge.scroll.scrollTo(scroll, 100, true);

// Scroll to element within container
const element = scroll.querySelector('.target');
hygge.scroll.scrollToElement(scroll, element, true);

// Get scroll information
const info = hygge.scroll.getInfo(scroll);
console.log(info.percentage);  // Current scroll percentage
console.log(info.position);    // Current scroll position
console.log(info.max);          // Maximum scroll position
console.log(info.isScrollable); // Whether content is scrollable

// Access data attributes
console.log(scroll.dataset.scrollPosition);  // "0" to "100"
console.log(scroll.dataset.scrollable);      // "true" or "false"

Accessibility

✓ Keyboard navigation: Use arrow keys to scroll within focused containers
✓ Focus indicators: Blue outline appears when container receives focus
✓ Reduced motion: Respects prefers-reduced-motion for smooth scrolling
✓ Touch support: iOS momentum scrolling with -webkit-overflow-scrolling
✓ Screen readers: Native scroll behavior preserved for assistive technology
✓ Dark mode: Automatic color adjustments via prefers-color-scheme
✓ Cross-browser: Supports both Webkit and Firefox scrollbar styling