Minimal jQuery/CSS3 Based Scrollbar Replacemenet - fakescroll

fakescroll is a lightweight jQuery plugin that makes your long content scrollable and displays a CSS/CSS3 styled scrollbar on mouse hover.

How to use it:

1. Load the fakeScroll.css for default scrollbar styles.

<link rel="stylesheet" href="fakeScroll.css">

2. Wrap your long content into a container.

<div class="fakeScroll">

...

</div>

3. Set the maximum height to make the container scrollable.

.fakeScroll {
  min-height: 70%;
  height: 1px;
  width: 500px;
  ...
}

4. Add upper and bottom fades to the container.

.scrollWrap::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 5%;
  background: -webkit-linear-gradient(#FFF 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(#FFF 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(#FFF 0%, rgba(255,255,255,0) 100%);
}

.scrollWrap::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5%;
  background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, #FFF 100%);
  background: -o-linear-gradient(rgba(255,255,255,0) 0%, #FFF 100%);
  background: linear-gradient(rgba(255,255,255,0) 0%, #FFF 100%);
}

5. Load jQuery library and the fakeScroll.js script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="fakeScroll.js"></script> 

6. Append a scrollbar to the container on hover.

$('.fakeScroll').fakeScroll();

Changelog:

2018-07-02

• v2.0.0: currently works as a vanilla JavaScript plugin.

2017-09-15

• v1.5.0

2017-06-20

• code refactor

2015-05-10

• changes the default behavior

2015-05-04

• tabes -> spaces

---

This awesome jQuery plugin is developed by yairEO. For more Advanced Usages, please check the demo page or visit the official website.