Question

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

Answer 1

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)