54

vanilla-js custom HTML scrollbars (robust & lightweight)

 5 years ago
source link: https://www.tuicool.com/articles/hit/RRvQzay
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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"

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK