jScrollPane: Basic example

by lemon kazi

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/demo.css">
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
        <div id="container">
            <h1>jScrollPane - simple demo page</h1>

            <p>
                This demonstration shows basic use of the jScrollPane plugin to add scrollbars to a HTML
                element which has an overflow of "auto". Note that with javascript disabled the browsers
                default scrollbars will be used to provide scrolling for the element below. With javascript
                enabled then the browsers default scrollbars will be replaced with jScrollPane scrollbars
                which can be styled at will.
            </p>

            <h2>Vertical only</h2>
            <div class="scroll-pane">
                <p>Vivamus  hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus  rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie  magna non est bibendum non venenatis nisl tempor. Suspendisse dictum  feugiat nisl ut dapibus.</p>
                <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non...

CSS

#container
{
    width: 510px;
}
/* Styles specific to this particular page */
.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}
.scroll-pane p
{
    margin: 5px 0;
}

JavaScript

$(function()
{
    $('.scroll-pane')
        .jScrollPane()
        .bind(
            'mousewheel',
            function(e)
            {
                e.preventDefault();
            }
        );
});