Search code examples
jqueryjscrollpanevertical-scrolling

jScrollPane - Thin scroller

I have a vertical scroller with a small width of 2px. The problem is that the dragger is almost impossible to click. Is there a possibility to add some sort of white spacing around the dragger to go around my (lack of) fine motor ability :) ?

Regards Marcus

Solution

  • The best way to achieve this is to leave the width of the scrollbar at something clickable like 10px. Then use either a border (for simple fixed colour) or a background graphic to provide the visual appearance of the drag and set it's background colour to transparent.

    Here is an example of doing this (using a border): http://www.jsfiddle.net/vitch/2nPXf/

    If you want to use an image then you should do something like:

    .jspVerticalBar .jspTrack
{
    background: transparent url(/path/to/narrow/image.png) repeat-y 0 0;
}

    (ensuring that the image is only as wide as you want your scrollbar to appear)