https://github.com/yairEO/fakescroll

vanilla-js lightweight custom HTML scrollbar
https://github.com/yairEO/fakescroll

component custom-scrollbar reactjs scrollbar

Last synced: 2 days 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 (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T08:22:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-30T04:50:16.576Z (15 days ago)
• Topics: component, custom-scrollbar, reactjs, scrollbar
• Language: JavaScript
• Homepage: http://yaireo.github.io/fakescroll
• Size: 173 KB
• Stars: 365
• Watchers: 12
• Forks: 33
• 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