(JS) Scroll animation with custom jScrollPane plugin
jScrollPane is a jQuery plugin written by Kelvin Luck that "converts a browser's default scrollbars into an HTML structure which can be easily skinned with CSS". It is a great peace of code I had the opportunity to work on during my recent projects, but it still lacks a bit of fanciness, particularly on scrolling animations.
This is why I came up with this custom version of the plugin, adding support for mousewheel and keyboard scroll animations.
The demo
Try to scroll the following panel using your mouse wheel or your keyboard arrow keys, it now scrolls smoothly !
The code
This example is running the custom jScrollPane plugin initialized with the following code (and skinned with custom CSS) :
$('.scroll').jScrollPane(
{
showArrows: false,
animateScroll: true,
animateDuration: 200,
mouseWheelSpeed: 200,
keyboardSpeed: 120,
/* This next parameter is new to jScrollpane-custom */
animateSteps: true
});
Download
Both the minified version and the plain source code are available on my github project page.
XML/RSS Feed