Light Scrollbar - minimalistic light plugin to create custom scrollbar! 💪
Getting Started
·
Documentation
·
File an Issue
·
Have a question or an idea?
Light, small library that allows create custom scrollbar.
Mobile & desktop-friendly
Not rebuilding scrolling experience, just visually represent browser scrollbar
Performant & with small bundle size (less than 2500B!)
Possibility to use `scroll-behavior: smooth`
Published as separate bundles for JS ES5 or modern browsers thanks to microbundle
Written completely in typescript
Published under MIT license
https://www.frsource.org/light-scrollbar
Installation
# npm
npm install @frsource/light-scrollbar
# Yarn
yarn add @frsource/light-scrollbar
# Pnpm
pnpm add @frsource/light-scrollbar
Modern JS/Typescript
import { attach } from "@frsource/light-scrollbar";
const scrollingElement = document.querySelector("element-with-overflow-auto");
attach(scrollingElement);
UMD
const scrollingElement = document.querySelector("element-with-overflow-auto");
window.lightScrollbar.attach(scrollingElement);
Rail (optional)
A background track under the scrollbar thumb. It is a separate entry, so it is added to your bundle only when you import it:
import { attach } from "@frsource/light-scrollbar";
import { rail } from "@frsource/light-scrollbar/rail";
import "@frsource/light-scrollbar/dist/rail.css";
// every `rail` value that is not set is taken from `bar`
attach(scrollingElement, { enableRail: true, plugins: [rail], rail: { y: { width: 10 } } });
With UMD, load dist/rail.umd.js and pass window.lightScrollbarRail.rail.
Styles
Colors and radius are CSS variables with defaults included in the styles - override only the ones you want to change, on the scrollbar element, any of its parents or :root:
.my-scrollbar {
--light-scrollbar-bar-background: #8b5cf6;
--light-scrollbar-bar-background-active: #6d28d9;
--light-scrollbar-bar-radius: 2px;
}
With the rail on, the rail and the thumb on top of it use --light-scrollbar-rail-background, --light-scrollbar-rail-radius, --light-scrollbar-rail-bar-background and --light-scrollbar-rail-bar-background-active.
Documentation
For docs, please visit frsource.org/light-scrollbar
Demo examples
Check our examples to see how its working!
Questions
Don’t hesitate to ask a question directly on the discussions board!
Changelog
Changes for every release are documented in the release notes and CHANGELOG file.
Contribute
Development happens in docs, so run pnpm docs:dev which runs microbundle and vitepress docs.
Tests can be done in cypress running pnpm cy which runs microbundle and cypress
License
Copyright (c) 2022-present, Szymon Dziewoński, FRSOURCE