Perfect Scroll Bar

Shares

Description: Minimalistic, developer friendly scrollbar plugin working with jQuery or vanilla JavaScript.

Features:

  • perfect-scrollbar has some requirements, but doesn’t change or add any style on original elements.
  • Designed not to have width or height. It’s fixed on the right and bottom side of the container.
  • You can change nearly all css styles of the scrollbar. The scrollbar design has no dependency on scripts.
  • Supports an ‘update’ function. Whenever you need to update the size or position of the scrollbar, just update.
  • Uses ‘scrollTop’ and ‘scrollLeft’, not absolute positioning or something messy.
  • Supports RTL on both WebKit and Gecko based browsers.

Usage:

npm

The best way to install and use perfect-scrollbar is with npm. It’s registered as perfect-scrollbar.

$ npm install perfect-scrollbar

Manually

You can manually download perfect-scrollbar on Releases.

From sources

If you want to use the development version of the plugin, use the source files which are not minified. They’re in the src directory. The development version may be unstable, but some known bugs may have been fixed.

$ git clone https://github.com/noraesae/perfect-scrollbar.git
$ cd perfect-scrollbar/src
$ npm install
$ gulp # will lint and build the source code.

JSFiddle

You can fork the following JSFiddles for testing and experimenting purposes:

Unofficial sources

The followings are not maintained officially. If there are issues of the following sources, please ask in each repository.

CDNs

Requirements:

  • the container must have a ‘position’ css style.
  • the container must be a normal container element.
    • PS may not work well in body, textarea, iframe or flexbox.

The following requirements are included in the basic CSS, but please keep in mind when you’d like to change the CSS files.

  • the container must have an ‘overflow: hidden’ css style.
  • the scrollbar’s position must be ‘absolute’.
  • the scrollbar-x must have a ‘bottom’ css style, and the scrollbar-y must have a ‘right’ css style.

Please keep in mind that perfect-scrollbar won’t completely emulate native scrolls. Scroll hooking is generally considered as bad practice, and perfect-scrollbar should be used with care. Unless custom scroll is really needed, please consider using native scrolls.

How to use

First of all, please check if the container element meets the requirements.

<link rel="stylesheet" href="dist/css/perfect-scrollbar.css" />
<style>
  #container {
    position: relative;
    height: 100%; /* Or whatever you want (eg. 400px) */
  }
</style>

I would recommend using the plugin with NPM and CommonJS module system like Browserify.

var Ps = require('perfect-scrollbar');

Or you can just load the script file as usual.

<script src="dist/js/perfect-scrollbar.js"></script>

To initialise the plugin, Ps.initialize is used.

var container = document.getElementById('container');
Ps.initialize(container);

It can be initialised with optional parameters.

Ps.initialize(container, {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});

If the size of your container or content changes, call update.

Ps.update(container);

If you want to destroy the scrollbar, use destroy.

Ps.destroy(container);

If you want to scroll to somewhere, just use a scrollTop property and update.

container.scrollTop = 0;
Ps.update(container);

Source:

function changeSize() {
    var width = parseInt($("#Width").val());
    var height = parseInt($("#Height").val());
 
    $("#Demo").width(width).height(height);
 
    // update scrollbars
    $('#Demo').perfectScrollbar('update');
 
    // or even with vanilla JS!
    Ps.update(document.getElementById('Demo'));
}
 
$(function() {
    $('#Demo').perfectScrollbar();
 
    // with vanilla JS!
    Ps.initialize(document.getElementById('Demo'));
});
Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest