https://github.com/yaireo/fakescroll
vanilla-js lightweight custom HTML scrollbar
https://github.com/yaireo/fakescroll
component custom-scrollbar reactjs scrollbar
Last synced: about 1 year ago
JSON representation
vanilla-js lightweight custom HTML scrollbar
- Host: GitHub
- URL: https://github.com/yaireo/fakescroll
- Owner: yairEO
- License: agpl-3.0
- Created: 2015-04-25T20:35:36.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T08:22:45.000Z (over 3 years ago)
- Last Synced: 2025-04-02T15:47:15.983Z (about 1 year ago)
- Topics: component, custom-scrollbar, reactjs, scrollbar
- Language: JavaScript
- Homepage: http://yaireo.github.io/fakescroll
- Size: 173 KB
- Stars: 367
- Watchers: 11
- Forks: 34
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FakeScroll⚡lightweight custom-looking scrollbars
- 1.4KB gzipped (js)
- 4.0KB minified (js)
- 7.7KB unminified (js)
- ~20+ KB avarage similar scripts (unminified)
> Currently only supports *vertical* scroll due to cultural norms
While there is somewhat of a support for scrollbar customization [through CSS](https://atomiks.github.io/30-seconds-of-css/#custom-scrollbar), it is not fully supported
in all browsers / older versions and the level of customization isn't flexible enough to allow creativity or certain special product needs.
👉 Make sure to *import* `fakescroll.css`
## Install ([CDN](jsdelivr.com/package/npm/@yaireo/fakescroll)):
```bash
npm i @yaireo/fakescroll
```
## [React port](https://codesandbox.io/s/react-fakescroll-4rdel)
```js
import FakeScroll from '@yaireo/fakescroll/react.fakescroll.js'
import '@yaireo/fakescroll/fakescroll.css'
const onFakeScrollChange = ({ scrollRatio }) => console.log(scrollRatio)
...
```
## Example markup:
```html
...
...
...
```
## Initialize custom scrollbar with callback:
```js
var myScrollbar = document.querySelector('.foo').fakeScroll({
onChange: () => console.log( myScrollbar.scrollRatio )
})
```
The `onChange` also has a `scrollRatio` propery in its *argument*:
```js
document.querySelector('.foo--outside').fakeScroll({
onChange: ({ scrollRatio }) => console.log( scrollRatio )
});
```
## The above markup will now become:
```html
...
...
...
```
## Browser support
The script probably won't work on IE without [Babel](https://babeljs.io/docs/en/babel-cli) & [ES2015 polyfills](https://github.com/paulmillr/es6-shim).
### [DEMO PAGE](http://yaireo.github.io/fakescroll)
## Settings
Name | Type | Default | Info
------------------- | ---------- | ----------- | --------------------------------------------------------------------------
classname | String | "" | Class name which is added to the scrollbar Track element
track | Boolean/String | false | enable track events. use "smooth" for smooth "jumping"
onChange | Function | | Callback function whenever the scroll updates