Best jQuery Scrollbar Plugins & Tutorials with Demo

jQuery Pull-Out Content Panel with CSS3 Animation

jQuery Pull-Out Content Panel with CSS3 Animation

This panel has been created to fit into any website with a clean and professional design. It can be fixed on the left or on the right and can contain any type of content : headings, texts, lists, images, videos, etc. The custom scrollbars packed in this menu will automatically appear when needed and if you need to add even more content, you can use the infinite carousel to scroll between each part of the panel.

Features:

  • Powerful sliding side panel
  • Left or right position
  • Custom automatic scrollbars
  • Infinite sliding carousel
  • Toggle elements
  • CSS3 animations
  • Styled typography
  • Simple working contact form
  • For any type of content
  • Font-Awesome icons
  • Fits into any page
  • Clean and professional design
  • Cross-browser support
  • Designed for desktop computers, tablets and mobiles

Scroller : jQuery plugin for replacing default browser scrollbars

Scroller : jQuery plugin for replacing default browser scrollbars

Scroller is a bare bones option for completely custom scrollbars that retain a native feel. The scrollbar can be styled using basic CSS and will fall back to the standard browser chrome if JavaScript is disabled. If you find most scrollbar replacements too bloated or convoluted for basic applications, Scroller is the answer.

perfect-scrollbar : Tiny but perfect jQuery Scrollbar plugin

perfect-scrollbar : Tiny but perfect jQuery Scrollbar plugin

Tiny but perfect jQuery scrollbar plugin.

Features:

  • There should be no css change on any original element.
  • The scrollbar should not affect the original design layout.
  • The design of the scrollbar should be (nearly) fully customizable.
  • If the size of the container or the content changes, the scrollbar size and position should be able to change.

Fancy News – jQuery plugin

Fancy News - jQuery plugin

Fancy News is a jQuery plugin that lets you create an outstanding news slider. It´s highly customizable and very easy to use. You can add umlimited of news with thumbnails. If the post is longer than the height of the main area, a cool scrollbar will be added automatically. You can also load your own RSS feed.

Antiscroll: jQuery cross-browser native OSX Lion scrollbars

Antiscroll: jQuery cross-browser native OSX Lion scrollbars

OS X Lion style cross-browser native scrolling on the web that gets out of the way.Antiscroll fixes a fundamental problem JavaScript UI developers commonly face: how do I customize scrollbars so that they get out of the way (for example, for different form widgets), but retain their native scrolling properties (like OS widge scrolling velocity, or OS specific inertia)?

Antiscroll addresses this issue by providing a cross-browser implementation of the scrollbars popularized by OS X Lion that retains native properties.

Features:

  • Supports mousewheels, trackpads, other input devices natively.
  • Total size is 1kb minified and gzipped.
  • Doesn’t magically autowrap your elements with divs (manual wrapping is necessary, please see index.html demo)
  • Fade in/out controlled with CSS3 animations.
  • Shows scrollbars upon hovering.
  • Scrollbars are draggable.
  • Size of container can be dynamically adjusted and scrollbars will adapt.
  • Supports IE7+, Firefox 3+, Chrome, Safari

slimScroll : jQuery nice Scrollbar

slimScroll : jQuery nice Scrollbar

slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar – similar to the one Facebook and Google started using in their products recently. slimScroll doesn’t occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

VenScrollBar : A jQuery Scrollbar Plugin

VenScrollBar : A jQuery Scrollbar Plugin

VenScrollBar is a jQuery plugin that allows web designers to replace the ugly, default OS scrollbar with custom ones that they create. All theming and customizations are done through CSS and the VenScrollBar API . The generated scrollbar completely implements the functionality of a regular scrollbar as well as offers some additional features such as auto-hiding and smooth-scrolling. This plugin is compatible with all the major browsers: IE7 +, FF3 .5+, Opera10+, Chrome5+, and Safari4+.

jQuery DragPan

jQuery DragPan

Give your website visitors the ability to navigate a large area of rendered HTML quickly. Usefull for creating maps of supermarkets, shopping malls, theme parks, zoos, festival sites, theatres, airports, seating plans in fact anywhere where the map would be larger than the users browser.

Features:

  • Very few images, mostly CSS
  • Includes 19 different customizable options and 3 callbacks
  • Function to move map to position
  • Doesn’t stop user from dragging beyond map, just bounces back till the whole map fills the screen
  • Scrollbars (Colour changable using CSS )
  • Copyright/help message (You choose the message)
  • Restrict to horizontal/vertical panning
  • Customize grab/grabbing cursor
  • Change return animation speed

jQuery CoreUISelect : Easy to Stylize Select Element

jQuery CoreUISelect : Easy to Stylize Select Element

jQuery coreUISelect is a cross browser easy to stylize select element with jQuery and CSS. Requires jQuery 1.6 or higher

Features:

  • Full customization
  • Automatic calculations
  • Optiongroup support
  • Keyboard support
  • Powerful callback functions
  • Compatible with mobile devices
  • Support jScrollPane plugin for customize default scrollbar

NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices

NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices

Nicescroll (as nice scroll for browsers) is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style. It supports DIVs, IFrames and document page (body) scrollbars. Compatible with Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers) Compatible with iOS devices as iPad. So you have scrollable divs for iPad.