ScrollBooster

ScrollBooster is a specialized, enjoyable drag-to-scroll micro-library designed to be incredibly lightweight (~2KB gzipped) while remaining highly flexible. It normalizes pointer events across devices, enabling smooth, physics-based content scrolling via mouse dragging, touch interactions, trackpads, and traditional mouse wheels.

Core Philosophy & Key Features

ScrollBooster was built to solve a specific UI problem: native browser scrolling is optimized for vertical documents, but interactive web applications often require omnidirectional panning across large, unbounded canvases.

  • Zero Dependencies: Completely standalone. It does not rely on jQuery, RxJS, or any other external libraries, keeping your application bundle lean.
  • Hardware Agnostic: Seamlessly handles touch events on mobile, traditional mouse clicks on desktop, and two-finger trackpad swipes, normalizing them into a single, predictable coordinate system.
  • Kinetic & Elastic Physics: Incorporates a lightweight physics engine. It provides natural-feeling deceleration (friction) when a user "throws" the content, and elastic edge-bouncing when reaching the boundaries of the scrollable area.
  • Render-Agnostic Architecture: While it provides built-in DOM manipulators (transform and native scroll modes), the core engine merely calculates physics states. You can intercept these coordinates to drive Canvas, WebGL, or complex React/Vue state changes.
  • Cross-Browser Reliability: Tested extensively to function on modern browsers (Chrome, Firefox, Safari) with explicit support for legacy environments like IE 11 and Edge.

When to Use ScrollBooster

Native CSS (overflow: auto) handles 90% of web layout needs. You should reach for ScrollBooster when building:

  1. Interactive Maps & Floorplans: Where users expect to click, hold, and drag to pan around a large image or SVG.
  2. Kanban Boards & Horizontal Galleries: Where horizontal mouse-wheel scrolling or drag-to-pan vastly improves the desktop user experience.
  3. Data Visualization & Timelines: Where infinite or highly customized scrolling physics are required.
  4. WebGL / Canvas Interfaces: Where DOM scrolling isn't applicable, and you need raw, friction-based coordinates to move a camera or scene.

When NOT to Use ScrollBooster

  • Standard Text Articles: If you are just building a standard vertical webpage, stick to native browser scrolling for optimal accessibility and performance.
  • Nested Scroll Containers: Be cautious when placing ScrollBooster instances inside natively scrollable areas, as pointer events can conflict. If necessary, utilize the shouldScroll configuration to manage event bubbling.

Ready to Begin?

Proceed to the Installation Guide to add ScrollBooster to your project, or jump straight to the Quick Start for a minimal "Hello World" implementation.