šŸŒœ
šŸŒž
smooth-scrollbar

smooth-scrollbar

v8.7.5

Customize scrollbar in modern browsers with smooth scrolling experience.

npm install smooth-scrollbar

README

Smooth Scrollbar

Customizable, Flexible, and High Performance Scrollbars!

npm monthly downloads core size gzip size Build status Gitpod Ready-to-Code

Installation

āš ļø DO NOT use custom scrollbars unless you know what you are doing. Read more

Tell us about the features you want in the next major update.

Via NPM (recommended):

npm install smooth-scrollbar --save

Via Bower:

bower install smooth-scrollbar --save

Browser Compatibility

Browser Version
IE 10+
Chrome 22+
Firefox 16+
Safari 8+
Android Browser 4+
Chrome for Android 32+
iOS Safari 7+

Demo

https://idiotwu.github.io/smooth-scrollbar/

Usage

Since this package has a pkg.module field, it's highly recommended to import it as an ES6 module with some bundlers like webpack or rollup:

import Scrollbar from 'smooth-scrollbar';

Scrollbar.init(document.querySelector('#my-scrollbar'));

If you are not using any bundlers, you can just load the UMD bundle:

<script src="dist/smooth-scrollbar.js"></script>

<script>
  var Scrollbar = window.Scrollbar;

  Scrollbar.init(document.querySelector('#my-scrollbar'));
</script>

Documentation

latest 7.x

FAQ

  • How to deal with position: fixed elements? #362
  • How to temporarily stop scrolling? #361
  • How to enable hash/anchor scrolling? #360
  • How to direct all scrolling to a particular direction? #359
  • How to disable scrolling in a particular direction? #357
  • more...

Who's Using It

  • Awwwards Conference: An Event for UX / UI Designers and Web Developers.
  • Listeners Playlist: A cool music player designed by Jiyong Ahn sharing musics from the facebook group 'Listeners Playlist'.
  • Matter: A new and better way to grow your professional skills.
  • Parsons Branding: Brand strategy and design studio based in Cape Town.
  • zer0bin: Just a place to paste
  • Feel free to add yours here šŸ¤—.

Credits

License

MIT

Release Notes

8.7.5
By Daofeng Wu ā€¢ Published on August 2, 2022

What's Changed

New Contributors

Full Changelog: https://github.com/idiotWu/smooth-scrollbar/compare/v8.7.4...v8.7.5

8.7.4
By Daofeng Wu ā€¢ Published on January 22, 2022

Bug Fixes

  • event/touch: reset touch trackers on touchstart, resolves #435
8.7.3
By Daofeng Wu ā€¢ Published on January 9, 2022

Minor Changes

  • geometry: use ResizeObserver instead of MutationObserver to apply automatic re-calculations. (This is a temporary optimization and we will refactor the code in v9.)
8.7.2
By Daofeng Wu ā€¢ Published on December 25, 2021

Minor Changes

  • touch: multiply touch moving velocity by devicePixelRatio on Android.
8.7.1
By Daofeng Wu ā€¢ Published on December 24, 2021

Minor Changes

  • touch: calculate scrolling delta based on the touch moving velocity.
8.7.0
By Daofeng Wu ā€¢ Published on November 1, 2021

Features

  • event/mouse: smoothen scrolling while dragging thumbs.
8.6.3
By Daofeng Wu ā€¢ Published on July 30, 2021

Bug Fixes

  • geometry: add container's paddings to content's size.
8.6.2
By Daofeng Wu ā€¢ Published on May 3, 2021

Bug Fixes

  • event/select: get new limit value when scroll function is called. @longvudai #314
8.6.1
By Daofeng Wu ā€¢ Published on March 19, 2021

Bug Fixes

  • dependencies: upgrade lodash-es to 4.17.21 (non-vulnerable version) @huggingpixels #306
8.6.0
By Daofeng Wu ā€¢ Published on February 1, 2021

Breaking Changes

  • Upgrade core-js to v3. @milewski #234

General

License
MIT
Typescript Types
Built-in
Tree-shakeable
Yes

Popularity

GitHub Stargazers
2,945
Community Interest
2,944
Number of Forks
387

Maintenance

Commits
11/2110/22020
Last Commit
Open Issues
37
Closed Issues
270
Open Pull Requests
1
Closed Pull Requests
17

Versions

Versions Released
11/2110/2202
Latest Version Released
Aug 2, 2022
Current Tags
latest8.7.5
beta8.0.0-beta.2

Contributors

idiotWu
idiotWu
Commits: 784
hanjeahwan
hanjeahwan
Commits: 4
Alecyrus
Alecyrus
Commits: 2
longvudai
longvudai
Commits: 2
milewski
milewski
Commits: 2
bbtimx
bbtimx
Commits: 1
koczkatamas
koczkatamas
Commits: 1
davidelanfranchi
davidelanfranchi
Commits: 1
kristapseglitis
kristapseglitis
Commits: 1
Zsavajji
Zsavajji
Commits: 1
adamcoulombe
adamcoulombe
Commits: 1
akkis
akkis
Commits: 1
svenefftinge
svenefftinge
Commits: 1
izebb
izebb
Commits: 1
nisarhassan12
nisarhassan12
Commits: 1