Skip to content

yairEO/fakescroll

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c1f6c78 · Jun 17, 2020

History

45 Commits
Jun 17, 2020
Apr 25, 2015
Jul 1, 2018
Mar 5, 2020
Jul 2, 2018
Mar 5, 2020
Jun 17, 2020
Jul 2, 2018
Jul 5, 2018
Mar 5, 2020
Jul 5, 2018
Mar 5, 2020
Mar 5, 2020

Repository files navigation



FakeScrolllightweight 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, 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

Example markup:

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

Initialize custom scrollbar:

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

The above markup will now become:

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

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"