jScrollPane - cross browser styleable scrollbars with jQuery and CSS
How to use
<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="https://s0.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js">
</script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
Then you just need to initialise jScrollPane on document.ready (using a selector which will find the
content you want to apply jScrollPane to):
$(function()
{
$('.scroll-pane').jScrollPane();
});
There are plenty of different ways to use jScrollPane - either passing in different
settings when you initialise it or by using the API. Each of these different
use cases is covered by an example linked to from below.
The particular files that you need are:
Simple examples/ tests
These examples show very basic functionality and exist so that I can test that any changes to
jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant
to look pretty, they merely highlight different bits of functionaity which are available. If you want
examples of jScrollPane looking good then check out the themes.
-
Demo showing basic scrolling (horizontal, vertical and combined)
-
Demo showing basic scrolling (horizontal, vertical and combined) with
arrow buttons
-
Demo showing how the contents of the scrollpane is focused as you tab to it
-
Demo showing how you can set "caps" and "gutters" to change the size and
positioning of the scrollbar relative to the content it is scrolling
-
Demo showing how you can restrict the minimum and maxium size of the
drag part of the scrollbar
-
Demo showing how the
arrowScrollOnHover option makes the arrow buttons automatically scroll the content when you
hover over them
-
Demo showing how the
verticalArrowPositions and
horizontalArrowPositions options can change the position of the arrow buttons
-
Demo showing how you can use the scrollTo
and scrollBy methods of the API
-
Demo showing how you can use the
scrollTo and scrollBy methods of the API along with the
animateScroll which enables animation when scrolling
-
Demo showing how you can make internal links automatically scroll the
scrollpane (and how external links can link directly into content
within a jScrollPane)
-
Demo showing that jScrollPane can work correctly on elements which are
initially set to be invisible via CSS
-
Demo showing vertical scrolling with multiple panes on the same page
and adding dynamic content and then reinitialising one of the panes
-
Demo showing how you can manually
reinitialise the scrollpane if you add dynamic content to it
-
Demo showing how you can change the content of your jScrollPane via an ajax
call and can reinitialise the scrollpane once the new content has loaded
-
Demo showing how jScrollPane can be set to automatically
reinitialise itself on a timer via the autoReinitialise
parameter
-
Demo showing how autoReinitialise
can also be used so that content with images in it displays correctly in jScrollPane
-
Demo showing how jScrollPane can be reinitialised when the width of
it's container changes and will update to fill the available space
-
Demo showing how jScrollPane can be reinitialised when the height
of it's container changes and will update to fill the available space
-
Demo showing how jScrollPane can be applied to an entire page
so that the browser's default scrollbars for the page are replaced. This demo also shows that you
can nest jScrollPanes and everything will still work correctly.
-
Demo showing how jScrollPane can be used to style the scrollbars in an
iframe.
-
Demo showing how vertical scrollbars can also appear on the left
hand side of content
-
Demo showing that no scrollbars are created when the content is too short
to scroll
-
Demo showing the events that are dispatched by an element you apply
jScrollPane to.
-
jscrollpane-rails makes integrating jScrollPane
with Rails apps easier.
