Tiny Scrollbar issue: how to use border on scrollbar

Question

I need define a border to my scrollbar, but using Tiny Scrollbar, when I do it, I get an incorrect value do scroll height. If I use padding, I get the same error. How could I to fix it?

.scrollable .track {
    background-color: #D8EEFD;
    height: 100%;
    width:13px;
    position: relative;
    border-radius:6px;
    border:1px solid #fff;
}

http://jsfiddle.net/qYMrN/

score 1 · Accepted Answer · answered Apr 19 '13 at 14:42

OK from what i thought the "error" was being the scroll bar didn't fit into the 200px window when a border is added. I came up with the following solution.

First CSS set the hieght to 198 pixels to account for the border.

.scrollable .track { background-color: #D8EEFD; width:13px; position:relative; height:198px; border-radius:6px; border:1px solid #fff;}

JQuery Tell the plugin the height is 198px

$(".scrollable").tinyscrollbar({ size: 198 });

this accounts for the 1px border (x2 as top and bottom have to be counted) the result is the following.

fiddle

Tiny Scrollbar issue: how to use border on scrollbar

1 Answers1