npmpackage.info

simplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

6.2.7

6,082

MIT

TypeScript

30.21 kB

234,061,471 5.9

Installations

npm install simplebar

Pull Requests

Open

5

Total

133

Closed

30

Merged

98

Issues

Open

99

Total

574

Closed

475

Releases

simplebar@6.2.7

Published on 22 Aug 2024

v7.0.0-beta

simplebar@7.0.0-beta.0

Published on 21 Oct 2023

v6.0.0

simplebar@6.0.0

Published on 15 Jan 2023

simplebar@5.3.3

Published on 20 May 2021

v5.0.7

Published on 14 Nov 2019

simplebar@5.0.1

Published on 16 Sept 2019

View all 42 releases

Developer

grsmto

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.11.1

NPM Version

lerna/6.4.1/node@v20.11.1+x64 (darwin)

Statistics

6,082 Stars

1,362 Commits

533 Forks

69 Watching

8 Branches

52 Contributors

Updated on 26 Nov 2024

Bundle Size

94.08 kB

Minified

30.21 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (52.84%)

JavaScript (38.15%)

CSS (7.86%)

HTML (1.13%)

SCSS (0.03%)

Total Downloads

Cumulative downloads

Total Downloads

234,061,471

Last day

98,487

Compared to previous day

Last week

3.9%

519,626

Compared to previous week

Last month

11.5%

2,138,741

Compared to previous month

Last year

-26.5%

27,114,669

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

can-use-dom simplebar-core

Dev Dependencies

@babel/plugin-transform-runtime intern minify promise

Versions

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... You keep the awesomeness of native scrolling...with a custom scrollbar! SimpleBar does NOT implement a custom scroll behaviour. It keeps the native overflow: auto scroll and only replace the scrollbar visual appearance.

🐦 Follow me on Twitter! or Mastodon!
👨‍💻 If you like Simplebar, buy me a coffee!

Design it as you want

SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

Lightweight and performant

Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.

Supported everywhere

SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

Getting started

The easiest way to use SimpleBar is with the default dependency-free version: npm install simplebar.

Core documention

If you are using a framework, SimpleBar also supports the most popular ones: Vue, Angular and React.

Demo

You can check our demo page (which is also the one we use for automated tests).

Changelog

See changelog here : https://github.com/Grsmto/simplebar/releases

Credits

KingSora for multiple features and inspirations (height: auto detection, RTL mode cross browser support and more) with OverlayScrollbars.
Jonathan Nicol for original idea with Trackpad Scroll Emulator.
Cassio Bittencourt for the logo design.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

0

Fuzzing

Determines if the project uses fuzzing.

Score

5.9

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to simplebar

simplebar-react

3.2.6

React component for SimpleBar

simplebar-vue

2.3.5

Vue component for SimpleBar

simplebar-angular

3.2.6

Angular component for SimpleBar

vue-simplebar

2.3.0

Vue.js wrapper for simplebar