https://github.com/frsource/light-scrollbar
Light-scrollbar allows you to build custom scrollbar, light scrollbar with just one line of code
https://github.com/frsource/light-scrollbar
css custom-scrollbar efficiency js scrollbar typescript ui
Last synced: about 1 year ago
JSON representation
Light-scrollbar allows you to build custom scrollbar, light scrollbar with just one line of code
- Host: GitHub
- URL: https://github.com/frsource/light-scrollbar
- Owner: FRSOURCE
- License: mit
- Created: 2022-03-16T07:34:18.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T17:03:32.000Z (about 1 year ago)
- Last Synced: 2025-04-08T18:21:50.677Z (about 1 year ago)
- Topics: css, custom-scrollbar, efficiency, js, scrollbar, typescript, ui
- Language: TypeScript
- Homepage: https://www.frsource.org/light-scrollbar
- Size: 22.9 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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
```bash
# npm
npm install @frsource/light-scrollbar
# Yarn
yarn add @frsource/light-scrollbar
# Pnpm
pnpm add @frsource/light-scrollbar
```
### Modern JS/Typescript
```ts
import { attach } from "@frsource/light-scrollbar";
const scrollingElement = document.querySelector("element-with-overflow-auto");
attach(scrollingElement);
```
### UMD
```js
const scrollingElement = document.querySelector("element-with-overflow-auto");
window.lightScrollbar.attach(scrollingElement);
```
## Documentation
For docs, please visit [frsource.org/light-scrollbar](https://www.frsource.org/light-scrollbar/)
- [Getting Started](https://www.frsource.org/light-scrollbar/instalation.html)
- [API Reference](https://www.frsource.org/light-scrollbar/api/options.html)
## Demo examples
[Check our examples to see how its working!](https://www.frsource.org/light-scrollbar/examples.html)
## Questions
Don’t hesitate to ask a question directly on the [discussions board](https://github.com/FRSOURCE/light-scrollbar/discussions)!
## Changelog
Changes for every release are documented in the [release notes](https://github.com/FRSOURCE/light-scrollbar/releases) and [CHANGELOG file](https://github.com/FRSOURCE/light-scrollbar/tree/master/CHANGELOG.md).
## 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
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2022-present, Szymon Dziewoński, FRSOURCE