***********************************************************************************

*****************************************
Sample for horizontal scrolling in jScrollPane:
http://jscrollpane.kelvinluck.com/arrows.html

***********************************************************************************
*****************************************
Chrome wouldn't scroll content when -webkit-backface-visibility has value as
hidden. jspPane's child elements should not have this property as hidden.
.jspPane, .jspPane div {-webkit-backface-visibility:visible !important;}

***********************************************************************************
*****************************************
Refer projects recipetab & brdresses.

1) Add jquery.mousewheel.js so that scrolling happens when mouse wheel is used.

2) Provide a width of 20px for vertical scroll bar.
EX: container width: 400px, content width 380px.
To force this, set width to jspPane (refer below)

3) Use following css definitions for correct functioning:

.jspPane{left:0px;}
.jspVerticalBar{width:7px; background: transparent !important;}
.jspTrack{background: url("../img/scroll_bar_bg.png") repeat-y scroll center center
transparent !important;}
.jspHorizontalBar{display:none;}
/*#id_scContainer .jspPane{width:440px !important;}*/
.jspDrag{background:url("../img/scroll_thumb.png") no-repeat left top;}

Note:
Refer searswishbook2011 for this:
.jspDrag{background:url(../img/scroll_over.png);}

4) To change content inside jcrollpane, do the following:

Remove the parent of jcrollpane content from dom.
Add that parent, jscrollpane content & then apply jscrollpane.

5) While applying jscrollpane, there would be jerk. Because, content is moved left
& vertical scroll bar is shown.
To fix this jerk, hide parent of jscrollpane initially. Only after applying
jcrollpane, show it. Till then, show loading guage.

EX:
a) Add jscrollpane parent (hidden) to dom:
$('.rtRecipeCategoryItemsTd').html('<div class="rtRecipeCategoryItemsDiv"></div>');

b) Add jscrollpane content:

$('.rtRecipeCategoryItemsDiv').html(htmlStr);

c) Apply jscrollpane & make it visible:

var cbk = function()
{
$('.rtRecipeCategoryItemsDiv').jScrollPane({scrollbarWidth:7,
scrollbarMargin:10, showArrows:false, verticalDragMinHeight:161,
verticalDragMaxHeight:161});

$('.rtRecipeCategoryItemsDiv').css({'visibility':'visible'});
};
setTimeout(cbk, 100);

Note:
Use image height (scroll_thumb.png) as min & max vertical drag height.
Scroll thumb height is not changed based on content height. It has fixed height.

6) To get scroll object:

var scrollObj = $('.rtRecipeCategoryItemsDiv').data('jsp');
scrollObj.scrollTo(0, 0);

7) When content is changed dynamically, use reinitialise() to refresh scroll bar.

scrollObj.reinitialise();

8) To destroy jScrollPane, use

scrollObj.destroy();

9) To scroll pane vertically or horizontally, use

scrollObj.scrollToY(100, true);
scrollObj.scrollToX(100, true);

***********************************************************************************
*****************************************
http://jscrollpane.kelvinluck.com/

Provides smoth scrolling & customized scroll bars. Following images are needed
(refer plphotocontest project):
basic_arrow_down.gif
basic_arrow_up.gif
scrollbar_thumb.gif
scrollbar_track_bg.gif

scrollbar_thumb.gif is used as scroll bar. It needs to have height based on

content.

***********************************************************************************
*****************************************