jQuery Scroll Plugin

Question

Hi Folks, I just included jQuery jScrollPane plugin in to my page and it seems to be working fine except one small issue. I want to decrease the size(height) of scrollBar tab (where we click to drag the scroll bar up and down). I have attached the current snapshot of it as you can see how long it is. On the example site, it shows up fine.

Src: http://jscrollpane.kelvinluck.com/themes/lozenge/

Note: I am talking about the Dark Colored Area on the snapshot.

Answer 1

The height of the dark element is dynamically calculated based on the contents and size of the pane.

Within the jScrollPane js you'd need to adjust the calculation of verticalDragHeight

Search for...

verticalDragHeight = 1 / percentInViewV * verticalTrackHeight;

The trouble is, if you do alter this it could (and probably would) affect the display of the scroll bar under certain circumstances. For example, you wouldn't need a scroll bar if the contents of the pane is smaller than the size of the pane right? Adjusting the verticalDragHeight could effect that determination.

---

Just in case I misunderstood the question, you are defining the height of your pane right? I.e...

.scroll-pane
{
    height: 200px;
}

Answer 2

If you want to reduce the size of the "drag" element there are some properties you can pass into the plugin to do so. Please see this example:

http://jscrollpane.kelvinluck.com/drag_size.html