Simple jQuery and jScrollPane running latest code from git
This is a simple jScrollPane setup running the latest code straight from git.
by thirdender
HTML
<script src="https://raw.github.com/vitch/jScrollPane/master/script/jquery.mousewheel.js"></script>
<script src="https://raw.github.com/vitch/jScrollPane/master/script/jquery.jscrollpane.js"></script>
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dolor, blandit quis volutpat eget, pretium non velit. Duis ac neque quis leo mollis tempus. Etiam dapibus vestibulum metus, ut pulvinar purus consequat nec. Phasellus mauris orci, pretium commodo aliquam at, faucibus bibendum libero. Maecenas in rutrum risus. Praesent scelerisque ipsum lectus. Quisque arcu velit, cursus at pellentesque dapibus, varius mollis ante. Pellentesque ultrices ipsum non enim dignissim sit amet eleifend lacus accumsan. Nullam in nisi ut urna gravida dignissim ac eget orci. Proin dignissim adipiscing justo, at semper justo tempus ut. Nunc ac felis dolor. Ut blandit auctor malesuada. Sed rhoncus semper ipsum, eu adipiscing purus malesuada sed. Vivamus posuere interdum mauris, nec suscipit justo molestie ac. Duis imperdiet suscipit augue id malesuada. Etiam luctus condimentum velit eu rutrum.</p>
<p>Etiam aliquam, lacus in sagittis luctus, dui lorem euismod leo, at egestas justo nunc at ante. Aliquam ligula neque, euismod ut ornare nec, vehicula ac ante. Aenean pretium ligula at metus vehicula ac vestibulum tortor mattis. Donec mi arcu, egestas ac scelerisque sit amet, tincidunt at ligula. Suspendisse vulputate cursus turpis id mollis. Ut quis libero turpis, eget bibendum tortor. Duis porttitor, dolor vel feugiat blandit, sapien mauris scelerisque dui, eu molestie ipsum erat at velit. Curabitur sodales iaculis iaculis. Nam porta lectus sed massa lobortis elementum. Curabitur eu cursus lectus. Aliquam ac tellus in metus porttitor sagittis a id sem. Donec rutrum velit et felis interdum lacinia. Mauris tincidunt placerat tempus. Mauris a magna eu erat venenatis hendrerit.</p>
<p>Donec vel tellus ac ante lobortis ultrices. In faucibus velit a nulla...
CSS
#lipsum {
border: 1px solid blue;
height: 200px;
overflow: auto;
}
#lipsum p {
margin: .8em 0 0; }
#lipsum p:first-child {
margin-top: 0; }
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
JavaScript
jQuery(function($) {
$("#lipsum").jScrollPane();
});