Search code examples
jqueryhtmlcssscrollbartinyscrollbar

Tiny Scrollbar issue: how to use border on scrollbar

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/

Solution

  • 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