svrollbar

• Purpose: svrollbar is a custom scrollbar library built with Svelte, designed to replace default browser scrollbars with customizable alternatives. It supports both window scrollbars and scrollable areas within web pages.

• Key Features:

  • Replaces window scrollbars or creates scrollable areas with custom styling.
  • Supports dynamic sizing via ResizeObserver.
  • Integrates with third-party libraries like virtual lists.
  • Offers customizable transitions (compatible with Svelte transitions).
  • Provides CSS variables for styling scrollbar appearance (track/thumb width, background, opacity, etc.).
  • Controls scrollbar visibility with alwaysVisible and initiallyVisible properties.

• Target Audience: Developers using Svelte who want to enhance scrollbar aesthetics and behavior in their applications.

• Svelte Support: Primarily built for Svelte, with components Svrollbar.svelte and Svroller.svelte for different use cases.

• Examples:

  • Live Example
  • Svelte REPL

• Customization:

  • Transitions: Replace default fade animations with Svelte transitions like fly.
  • Style: Adjust via CSS variables (e.g., track/thumb width, background, opacity).
  • Visibility: Toggle with alwaysVisible or initiallyVisible props.

• Components:

  • Svrollbar: For replacing existing scrollbars (e.g., window or overflow-based).
  • Svroller: For creating scrollable areas with custom scrollbars.

For detailed component specifications, see the COMPONENT_INDEX .