Minimal Custom Scrollbar In Vanilla JavaScript – fakescroll

Preview:

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'
});

Changelog:

v2.5.0 (04/11/2021)

• refactored

v2.2.1 (01/23/2021)

• [REFACTOR] – improved the way the scrollbar is hidden so it will be more accurate, regardless of it’s width