OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.

Overview:

OverlayScrollbars is a javascript scrollbar plugin designed to hide native scrollbars, provide custom styleable overlay scrollbars, and maintain native functionality and feel. It was created to address the issue of ugly and space-consuming scrollbars that didn’t meet the developer’s requirements in terms of features, quality, simplicity, license, and browser support.

Features:

Simple and well-documented API
High browser compatibility with Firefox 59+, Chrome 55+, Opera 42+, Edge 15+, and Safari 10+
Fully Accessible with native scrolling behavior preserved
Server-side compatibility with Node, Deno, and Bun for SSR, SSG, and ISR support
Tested on various devices like Mobile, Desktop, and Tablet
Tested with various inputs including Mouse, Touch, and Pen
Treeshaking to bundle only necessary components
Automatic update detection without the need for constant polling
Dependency-free with 100% self-written code for optimal size and functionality

Installation:

npm & nodejs

OverlayScrollbars can be installed using npm or any preferred package manager:

npm install overlayscrollbars

Import the package:

import OverlayScrollbars from 'overlayscrollbars';

Note: If ‘overlayscrollbars/overlayscrollbars.css’ path doesn’t work, use ‘overlayscrollbars/styles/overlayscrollbars.css’.

Manual Download & Embedding

For manual usage without a bundler or package manager:

Download a release or use a CDN
Use .browser extension for JavaScript files
Use .es5 extension for older browser support, .es6 for newer
For production, use .min extension for JavaScript and stylesheet files Embed OverlayScrollbars in HTML:

<script src="path/to/overlayscrollbars.min.js"></script>
<link rel="stylesheet" href="path/to/overlayscrollbars.min.css"/>

Summary:

OverlayScrollbars is a feature-rich scrollbar plugin with an emphasis on simplicity, compatibility, and customization. Its dependency-free design, comprehensive browser support, and accessibility features make it a valuable tool for developers seeking to enhance scrollbar functionality in their projects.