jQuery ClassyScroll

Overview

ClassyScroll is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that can be used not only as replacement of native browser scrollbars, but you can use it even to create slideshows with external controls. Among other features ClassyScroll can auto adjust scrollbars on window resize and recognize touch events on Android and iOS devices, so it's perfect for responsive sites that have to dynamically adapt to different environments and devices.

  • vertical and horizontal scroll modes
  • mouse wheel and keyboard support
  • sizes adjustment during window resize
  • 15 configuration options
  • works on Android and iOS
  • scroll callback function
  • external API using jQuery events

Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.

Usage

First you need to include the jQuery library, since ClassyScroll is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Secondly, you need to include the jQuery ClassyScroll javascript and CSS files into your page. You can do it by adding the code below to your page.

<script src="js/jquery.classyscroll.js"></script>
<link rel="stylesheet" media="screen" href="css/jquery.classyscroll.css" />

Next, you create the div element on which you want to apply a scrollbar. Or, if you want to create a body scrollbar, skip this part. Make sure the element that will receive the scrollbars has fixed height (height: 300px for ex.)

<div class="scrollbars"></div>

As the last step, you trigger the ClassyScroll() function on the element you just created. In this case, we trigger the function on the div with the class scrollbars.

$(".scrollbars").ClassyScroll();

Options

scroll - type of scrollbar, can be both, vertical or horizontal.

autoHide - autohide the scrollbars, true or false.

autoHideTime -

sliderSize -

sliderOpacity - slider opacity

sliderOpacityTime -

sliderOpacityDelay -

wheelSpeed - scroll wheel speed

touchSpeed - touch speed

pathPadding -

keyScroll -

scrollTime -

scrollInterval -

scrollEasing - default effect for scroll

zIndex -

onscroll - callback for scroll

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, lectus ac lobortis aliquam, enim diam elementum sem, vel viverra leo est sit amet sapien. Proin egestas nibh nibh, in congue ipsum. Mauris neque orci, dictum a suscipit eget, porta ut augue. Mauris imperdiet massa vel mauris posuere eget eleifend erat posuere. Pellentesque et lectus risus. Vivamus ac libero eget tortor posuere tempus. Morbi tristique posuere tincidunt. Mauris hendrerit varius consequat. Mauris nec lectus sed lacus ullamcorper iaculis ut eu nibh. Quisque vel eros at orci scelerisque luctus. Etiam eu dui eu erat facilisis mattis ut sit amet lectus. Curabitur laoreet molestie fringilla.

Cras rutrum molestie fermentum. Maecenas ligula tortor, tincidunt vel tempor ut, tempus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida commodo erat in lobortis. Sed quis arcu lectus, ac fermentum neque. Sed ullamcorper vestibulum diam vel cursus. Nam sed vehicula odio. Proin eu augue placerat sapien interdum molestie. Sed condimentum ullamcorper velit, ut pulvinar purus accumsan tempus. Aliquam id tristique quam. Pellentesque vehicula, libero nec tempus dignissim, erat lectus eleifend augue, a pharetra nunc arcu at leo. Maecenas vulputate odio et mi vulputate imperdiet iaculis massa dictum.

Mauris ligula quam, euismod sed sodales eget, ultrices sit amet massa. Praesent lacinia tincidunt lacus, iaculis ullamcorper purus congue tristique. Nulla sed est erat. Maecenas at turpis dignissim odio accumsan dignissim in vitae velit. Nam lectus nisl, semper non luctus eget, fringilla vitae tortor. Nam pretium neque ac sapien blandit eu gravida libero faucibus. Sed sed lectus turpis. Proin dictum congue lacus sit amet congue. Nunc nibh lectus, congue a venenatis at, pretium at urna. Praesent ut odio et lorem rutrum hendrerit ut nec urna. Donec sodales purus nec augue consequat consectetur. Aenean sit amet arcu odio.

Nulla facilisi. Proin bibendum ipsum vitae quam blandit viverra. Nulla leo ligula, bibendum in rhoncus eu, mollis et massa. Nulla id rutrum ipsum. Donec id tellus eu velit tempor scelerisque quis et justo. Pellentesque ullamcorper rutrum ipsum a placerat. Etiam a dui a metus rhoncus hendrerit.

Quisque dolor felis, fringilla sit amet convallis et, tempus tristique neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non nisl et erat sodales rutrum. Vestibulum ut commodo sapien. Nulla vitae vehicula eros. Aliquam orci neque, sollicitudin vitae imperdiet vitae, dapibus eu dolor. Vivamus eu feugiat odio. Integer condimentum turpis vitae metus lobortis viverra. Maecenas tincidunt lacus sed sem gravida dapibus. Aliquam lobortis condimentum vestibulum. Quisque pharetra scelerisque odio eu pulvinar. Phasellus ac justo elit. Quisque volutpat, tellus non porta adipiscing, tortor nulla fringilla eros, et cursus quam sapien ac lacus. Proin blandit leo nec eros pretium ac ornare sem ultrices.