Scrollbar

A jQuery plugin for custom scrollbars.

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi. Aenean rutrum, enim sit amet rutrum fermentum, magna justo volutpat massa, lacinia adipiscing nisl magna eget nibh. In auctor, nibh eget faucibus tristique, arcu turpis molestie orci, placerat suscipit diam nibh et erat. Curabitur tempus lectus quis odio ornare porta.

Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.

Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.

Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies. Praesent porttitor nulla non risus porta consequat. Nunc vulputate porta nulla non ultrices. Donec et magna eu nisl elementum scelerisque. Curabitur in vehicula dui.

Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac, suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. Aliquam ornare, nunc sit amet porttitor ornare, libero lectus congue enim, vitae tincidunt sapien justo et ligula. Proin vestibulum blandit fringilla. 

<div class="scrollbar">
	...
</div>
$(".scrollbar").scrollbar();
View All Demos

Using Scrollbar

Main

scrollbar.js
scrollbar.css

Dependencies

jQuery
core.js
touch.js

Basic

Scrollbar will allow you to customize the visible scrollbar on overflow content.

$(".target").scrollbar();
<div class="target">
  <p>...</p>
</div>

Horizontal

$(".target").scrollbar({
  horizontal: true
});

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-scrollbar-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
customClass string '' Class applied to instance
duration int 0 Scroll animation length
handleSize int 0 Handle size; 0 to auto size
horizontal boolean false Scroll horizontally
mouseWheel boolean true Flag to prevent scrolling of parent element
theme string "fs-light" Theme class name
trackMargin int 0  

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.scrollbar("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").scrollbar("destroy");

resize

Resizes layout on instance of plugin

$(".target").scrollbar("resize");

scroll

Scrolls instance of plugin to element or position

$(".target").scrollbar("scroll", position, duration);

Parameters

Name Type Default Description
position string or int null Target element selector or static position
duration int null Optional scroll duration

CSS

Class Type Description
.fs-scrollbar-element element Target elmement
.fs-scrollbar element Base widget class
.fs-scrollbar.fs-scrollbar-horizontal modifier Indicates horizontal scrolling
.fs-scrollbar.fs-scrollbar-setup modifier Indicates setup state
.fs-scrollbar.fs-scrollbar-active modifier Indicates active state
.fs-scrollbar-content element Scrolling content
.fs-scrollbar-bar element Scrollbar container
.fs-scrollbar-track element Scrollbar track container
.fs-scrollbar-handle element Scrollbar handle