Scrollbar

Custom scrollbar with accessible controls.

Usage

<w-scrollbar>
  <w-slot body>
    <div>
      <!-- Scrollable content -->
    </div>
  </w-slot>
  <w-slot rail>
    <div>
      <w-slot knob><div></div></w-slot>
    </div>
  </w-slot>
</w-scrollbar>

Props

Prop	Type	Default	Description
orientation	"vertical" | "horizontal"	"vertical"	Scroll direction

Slots

Slot	Element	Description
content	Container	Scrollable content area
track	Container	Scrollbar track
thumb	Element	Draggable thumb

Keyboard

Key	Action
ArrowDown / ArrowRight	Scroll forward
ArrowUp / ArrowLeft	Scroll backward
Page Down	Scroll page forward
Page Up	Scroll page backward
Home	Scroll to start
End	Scroll to end

Styling

The library sets overflow-x and overflow-y automatically based on [orientation]. You only need to size the host. Use the standard browser scrollbar styling APIs (scrollbar-width, scrollbar-color, ::-webkit-scrollbar) for visual treatment.

w-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f0f0f0;
}

w-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
w-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

Selector	Targets
w-scrollbar[orientation="horizontal"]	Horizontal scroll only
w-scrollbar[orientation="vertical"]	Vertical scroll only
w-scrollbar[orientation="both"]	Both axes

Accessibility

• role="scrollbar" with proper ARIA
• Keyboard accessible
• Thumb position reflects scroll state