tessl/npm-smooth-scrollbar

Customize scrollbar in modern browsers with smooth scrolling experience.

—

Pending

Overview

Eval results

Files

Core Scrollbar Management

Name: tessl/npm-smooth-scrollbar
Author: tessl

Primary interface for creating, managing, and destroying scrollbar instances on DOM elements. Provides both single-element and batch operations.

Capabilities

Initialize Single Scrollbar

Creates a scrollbar instance on a specific DOM element with optional configuration.

/**
 * Initializes a scrollbar on the given element
 * @param elem - The DOM element to initialize scrollbar on
 * @param options - Optional configuration options
 * @returns Scrollbar instance for the element
 */
static init(elem: HTMLElement, options?: Partial<ScrollbarOptions>): Scrollbar;

Usage Examples:

import Scrollbar from "smooth-scrollbar";

// Basic initialization
const container = document.querySelector("#content");
const scrollbar = Scrollbar.init(container);

// With custom options
const scrollbar = Scrollbar.init(container, {
  damping: 0.05,
  thumbMinSize: 40,
  alwaysShowTracks: true,
  continuousScrolling: false
});

Initialize All Scrollbars

Automatically initializes scrollbars on all elements with the data-scrollbar attribute.

/**
 * Automatically init scrollbar on all elements with [data-scrollbar] attribute
 * @param options - Optional configuration options applied to all instances
 * @returns Array of created scrollbar instances
 */
static initAll(options?: Partial<ScrollbarOptions>): Scrollbar[];

Usage Examples:

// HTML: <div data-scrollbar>...</div>
const scrollbars = Scrollbar.initAll();

// With options applied to all
const scrollbars = Scrollbar.initAll({
  damping: 0.1,
  renderByPixels: true
});

Check Scrollbar Existence

Checks if a scrollbar instance exists on a given element.

/**
 * Check if there is a scrollbar on given element
 * @param elem - The DOM element to check
 * @returns True if scrollbar exists on element
 */
static has(elem: HTMLElement): boolean;

Get Scrollbar Instance

Retrieves the scrollbar instance for a specific element.

/**
 * Gets scrollbar on the given element
 * @param elem - The DOM element to get scrollbar from
 * @returns Scrollbar instance or undefined if none exists
 */
static get(elem: HTMLElement): Scrollbar | undefined;

Usage Examples:

const container = document.querySelector("#content");

if (Scrollbar.has(container)) {
  const scrollbar = Scrollbar.get(container);
  scrollbar.scrollTo(0, 100);
}

Get All Scrollbar Instances

Returns an array containing all active scrollbar instances.

/**
 * Returns an array that contains all scrollbar instances
 * @returns Array of all active scrollbar instances
 */
static getAll(): Scrollbar[];

Usage Examples:

// Update all scrollbars
const allScrollbars = Scrollbar.getAll();
allScrollbars.forEach(scrollbar => {
  scrollbar.update();
});

// Get total scroll position across all scrollbars
const totalScrollY = allScrollbars.reduce((sum, sb) => sum + sb.scrollTop, 0);

Destroy Single Scrollbar

Removes and cleans up a scrollbar instance from a specific element.

/**
 * Removes scrollbar on the given element
 * @param elem - The DOM element to remove scrollbar from
 */
static destroy(elem: HTMLElement): void;

Destroy All Scrollbars

Removes and cleans up all scrollbar instances from the current document.

/**
 * Removes all scrollbar instances from current document
 */
static destroyAll(): void;

Usage Examples:

// Clean up single scrollbar
const container = document.querySelector("#content");
Scrollbar.destroy(container);

// Clean up all scrollbars (useful for SPA route changes)
Scrollbar.destroyAll();

Plugin Registration

Registers plugins to be available for all scrollbar instances.

/**
 * Attaches plugins to scrollbars
 * @param Plugins - Scrollbar plugin classes to register
 */
static use(...Plugins: (typeof ScrollbarPlugin)[]): void;

Usage Examples:

import Scrollbar from "smooth-scrollbar";
import OverscrollPlugin from "smooth-scrollbar/plugins/overscroll";

// Register plugins globally
Scrollbar.use(OverscrollPlugin);

// Now all scrollbars can use the overscroll plugin
const scrollbar = Scrollbar.init(container, {
  plugins: {
    overscroll: {
      effect: "bounce",
      damping: 0.15
    }
  }
});

Style Management

Controls the attachment and removal of default scrollbar styles.

/**
 * Attaches default style sheets to current document
 */
static attachStyle(): void;

/**
 * Removes default styles from current document
 */
static detachStyle(): void;

Usage Examples:

// Remove default styles to use custom CSS
Scrollbar.detachStyle();

// Re-attach default styles if needed
Scrollbar.attachStyle();

Static Properties

interface SmoothScrollbar {
  /** Package version string */
  static version: string;
  
  /** Reference to ScrollbarPlugin base class */
  static ScrollbarPlugin: typeof ScrollbarPlugin;
}

Install with Tessl CLI