Question

I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?

I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:

#sidebar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#sidebar::-webkit-scrollbar-track-piece  {
    background-color: #f3f3f3;
    -webkit-border-radius: 0px;
}

#sidebar::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #ccc;
    -webkit-border-radius: 0px;
}

Answer 1

As far as having the “inner” scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don’t believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html