Custom Vertical/Horizontal Scrollbars - Fxp jQuery Scroller

A jQuery plugin created for replacing the native scrollbar on the desktop.

The Fxp jQuery Scroller plugin adds slim, customizable, vertical/horizontal scrollbars to scrollable content with ease.

Fully customizable via CSS and easy to implement via HTML data attribute.

Looking for a pure CSS solution to customize the native scrollbar? Check out our Best Custom Scroll Bar Plugins article for more information.

How to use it:

1. Load the Fxp jQuery Scroller plugin's files in the document. Note that the JavaScript file scroller.min.js must be loaded after jQuery.

<link href="./dist/scroller.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/scroller.js" async="async"></script>

2. Add the data-scroller="true" attribute to the scrollable container and done.

<div class="content" data-scroller="true">
  <p>The paragraph 1.</p>

  <p>The paragraph 2.</p>

  <p>The paragraph 3.</p>

  <p>The paragraph 4.</p>

  <p>The paragraph 5.</p>
</div>

3. Create a horizontal scrollbar instead.

<div class="content" data-scroller="true" data-direction="horizontal">
  <p>The paragraph 1.</p>

  <p>The paragraph 2.</p>

  <p>The paragraph 3.</p>

  <p>The paragraph 4.</p>

  <p>The paragraph 5.</p>
</div>

4. Override the default scrollbar styles.

.scroller-scrollbar {
  background-color: #000;
  opacity: 0.32;
}

5. Inverse the position of the scrollbar. In this example, the scrollbar will be placed on the left side of the scrollable content.

<div class="content" data-scroller="true" data-scrollbar-inverse="true">
  <p>The paragraph 1.</p>

  <p>The paragraph 2.</p>

  <p>The paragraph 3.</p>

  <p>The paragraph 4.</p>

  <p>The paragraph 5.</p>
</div>

---

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