perfect-scrollbar

Minimalistic but perfect custom scrollbar plugin

perfect means...

There's no css change on any original element

Do not affect the original design layout

The scrollbar css is fully customizable

The scrollbar size and position can be updated

Demo

Width:

Height:

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

Download

perfect-scrollbar v0.7.0

Documentation