Easy Styleable jQuery Custom Scrollbar Plugin - Simplescroll

Simplescroll is a tiny jQuery plugin used for generating an easy-to-style custom scroll bar which can be positioned anywhere within your scrollable container.

How to use it:

1. Wrap your long content into a DIV container and specify the position of the custom scrollbar using data-simplescroll attribute like this:

<div id="demo" data-simplescroll="top|right">
  ...
</div>

2. Make the DIV container scrollable in the CSS.

#demo {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 500px;
  height: 200px;
  padding: 1em 2em;
}

3. Place the latest version of jQuery and jQuery Simplescroll's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.simplescroll.js"></script>

4. Call the plugin on the scrollable container and done.

$("div").simplescroll();

5. Apply your own styles to the scrollbar's track, handle and corner.

.ss-track { ... }
.ss-track-x { ... }
.ss-track-y { ... }
.ss-handle { ... }
.ss-handle-x { ... }
.ss-handle-y { ... }
.ss-corner { ... }

---

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