Question

I’m using the jScrollPane jQuery plugin (http://jscrollpane.kelvinluck.com) to implement custom scrollbar in my application.

However, I need to be able to modify the height of the jspDrag element. It seems that the height of the element is dependent on the amount of content inside the div. However, I want to use an image (which needs to be fixed size i.e non-repeatable) for jspDrag and the image is going to be very small (lesser in height than the actual jspDrag element).

How do i accomplish this ?

Answer 1

The plugin provides some properties to control min/max height/width of the scrollbars:

• verticalDragMinHeight
• verticalDragMaxHeight
• horizontalDragMinWidth
• horizontalDragMaxWidth

Check the settings page of the plugin.

Setting the same value for min/max will fix the height/width:

$('.scroll-pane').jScrollPane({
    verticalDragMinHeight: 100,
    verticalDragMaxHeight: 100
});

Live example here in jsfiddle.