jQuery nice scrollbars solutions

Sometimes we want to improve the default appearance of scroll bars. Here we present couple “jQuery nice scrollbars” plugins, that really supports this task.

Using jQuery nice scrollbars plugins

1. Simplebar

SimpleBar is a plugin that tries to solve a problem of ugly, default scroll bars. With this plugin, custom scrollbars made simple, lightweight, easy to use and cross-browser.

Usage

Include jQuery and SimpleBar:

<link rel="stylesheet" href="css/simplebar.css" />
<script src="js/simplebar.min.js"></script>

Now we can use the plugin via data attributes, by setting:

data-simplebar-direction=”vertical”

or via JavaScript:

$('#my-element').simplebar();

That’s it!

License: MIT

Homepage:

http://grsmto.github.io/simplebar

GitHub:

https://github.com/Grsmto/simplebar

2. NanoScroller

The nanoScroller.js is a jQuery plugin, that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for our web projects. It uses minimal HTML markup.

The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets!

jQuery nice scrollbars plugin
jQuery nice scrollbars plugin

License: MIT

Homepage:

http://jamesflorentino.github.io/nanoScrollerJS

GitHub:

https://github.com/jamesflorentino/nanoScrollerJS

3. jQuery Nicescroll

The next jQuery nice scrollbars solution is Nicescroll 3. Works well on many devices and resolutions. This plugin brings styles for scrollbars, very similar to iOS.

It supports styling scrollbars of many elements: DIVs, IFrames, textarea, and certainly document page (body) scrollbars. Compatible with all desktop browsers and MANY mobile browsers.

Key features:

– very stylish scrollbars, with no occupation on the window

– simple installation and activation, it works with NO modification of our code

– scroll is smooth (as modern tablet browsing, we can customize the speed)

– zoom feature

– hardware accelerated scroll (where available)

– support for touch devices

– compatibile with jQuery UI, jQuery Touch, jQuery Mobile

and many others.

License: MIT

Homepage:

http://areaaperta.com/nicescroll

GitHub:

https://github.com/inuyaksa/jquery.nicescroll

4. jQuery custom content scroller

Highly customizable custom scrollbar jQuery plugin, which includes vertical / horizontal scrollbar(s), adjustable scrolling speed, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, and many other features.

jQuery nice scrollbars demos
jQuery nice scrollbars demos

Usage? By one line:

$('#my-element').mCustomScrollbar(); 

License: MIT

Homepage:

http://manos.malihu.gr/jquery-custom-content-scroller

GitHub:

https://github.com/malihu/malihu-custom-scrollbar-plugin

See also:

Sly scrolling plugin – a lightweight, one directional slider

jQuery content scroller plugin – customizable

CSS3 and jQuery single page scrolling plugin – singular.js

Ascensor.js – jQuery content scroller (Swiss quality)

jQuery mini help system

Enjoy jQuery nice scrollbars!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn2Pin on Pinterest1