CODEWITHSUNDEEP
css
Rupam Datta
Rupam Datta

Reputation: 1879

Auto hiding vertical scrollbars using css overflow

I came across a problem using css overflow for autohiding the vertical scrollbar. I read in a few articles to use css hover pseudo class to achieve this behaviour and the good thing is I am successful to some extent.

I used both 'scroll' and 'auto' for the overflow-y property. With scroll it works like a charm, but with 'scroll' the problem is even if there is no need to show the scrollbar, it is visible which I feel 'auto' does very well.

But again with 'auto' the problem is there is a 16px(I assume) gap at the right side. Probably it the width of the scrollbar. I wanted the full width. I used a background to explain my problem.

Here is the fiddle. http://jsfiddle.net/9scJE/

div.autoscroll {
    height: 200px;
    width: 400px;
    overflow: hidden;
    border: 1px solid #444;
    margin: 3em;
}

div.autoscroll:hover {
    /* overflow-y: scroll; */
    overflow-y: auto;
}

Appreciate any help.

Upvotes: 24

Views: 63489

Answers (4)

asianGeek
asianGeek

Reputation: 51

::-webkit-scrollbar{
     opacity:0;
     background: transparent;
}
::-webkit-scrollbar:hover{
     opacity: 1;
}
.container:hover::-webkit-scrollbar-thumb{
     background: red;
}

Upvotes: 2

Daniel
Daniel

Reputation: 4946

You should compensate for the scrollbar with padding.

div.autoscroll:hover {
    /* overflow-y: scroll; */
    overflow-y: scroll;
padding-right: 16px;

}

However it is better to do this with javascript, since the scrollbar width can slightly differ between browsers. I have used this solution with success: How to calculate the width of the scroll bar?

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191749

This actually seems like a browser bug to me, but it seems to work like you want if you add padding-right: 1px on hover.

div.myautoscroll:hover {
     overflow: auto;
     padding-right: 1px;
}

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

Upvotes: 23

Eli
Eli

Reputation: 14827

You can add width: 100%; when hover on the div:

 div.myautoscroll:hover {
     overflow: auto;
     width: 100%;
 }

Working Demo

Upvotes: 1

Related Questions