Skip to content
vanilla-js lightweight custom HTML scrollbar
Branch: master
Clone or download
yairEO corrected dragging calculations there needed some fine-tuning to bett…
…er working when the drag event position was outside the bounds of the track
Latest commit 4efb8fc Jul 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
.gitignore updated to version 2.0.0 using vanilla-js only Jul 1, 2018
LICENSE #12 Jul 2, 2018
README.md - Jul 1, 2018
fakescroll.css
fakescroll.js
fakescroll.min.js
index.html
package.json

README.md

fakeScroll

Very lightweight & robust custom-looking HTML scrollbar script.

  • 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, 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.

Example markup:

<div class="foo">
    ...
    ...
    ...
</div>

Initializing:

document.querySelector('.foo').fakeScroll();

The above will transform into this:

<div class="foo">
    <div class="fakeScroll__wrap">
        <div class="fakeScroll__content">
            ...
            ...
            ...
        </div>
    </div>
    <div class="fakeScroll__bar"></div>
</div>

Browser support

The script probably won't work on IE without Babel & ES2015 polyfills.

DEMO PAGE

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"
You can’t perform that action at this time.