Minimal Custom Scrollbar In Vanilla JavaScript – fakescroll

Category: Javascript , Recommended | July 18, 2018
Author: yairEO
Views Total: 1,100
Official Page: Go to website
Last Update: July 18, 2018
License: MIT

Preview:

Minimal Custom Scrollbar In Vanilla JavaScript – fakescroll

Description:

This is the vanilla JavaScript version of the jQuery fakescroll plugin which makes the regular browser scrollbar fully customizable via CSS.

How to use it:

Download and import the fakescroll library into the document.

<link rel="stylesheet" href="fakescroll.css">
<script src="fakescroll.js"></script>

Initialize the fakescroll on your scrollable element. Done.

<div class="example">
  Long Content Here
</div>
document.querySelector('.example').fakeScroll();

Apply your own CSS styles to the scrollbar.

.example {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  min-height: 70%;
  height: 1px;
  width: 500px;
  overflow: auto;
  background: white;
}

.example.fakeScroll__scope { background: none; }

.example .fakeScroll__content {
  padding-top: 1em;
  padding-bottom: 1em;
}

.example .fakeScroll__wrap {
  background: #FFF;
  border-radius: 4px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Enable/disable the scrollbar track.

document.querySelector('.example').fakeScroll({
  track: true
});

Add an extra CSS class to the scrollbar.

document.querySelector('.example').fakeScroll({
  classname: 'your-own-class'
});

You Might Be Interested In:


Leave a Reply