Auto hiding vertical scrollbars using css overflow

Question

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.

Explosion Pills · Accepted Answer · 2013-04-10 05:45:57Z

23

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/

answered Apr 10, 2013 at 5:45

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rupam Datta Over a year ago

Thanks Explosion Pills. The solution worked for me. I've checked in webkit browsers in mac, FF. I'm yet to check in windows.

speedplane Over a year ago

Awesome answer. Also note: adding border-right: 1px solid gray; also works. In my case, I did not want to add any padding, but I could live with a thicker border.

Community · Accepted Answer · 2017-05-23 12:02:02Z

2

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?

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 10, 2013 at 5:47

Daniel

4,9643 gold badges30 silver badges33 bronze badges

Comments

asianGeek · Accepted Answer · 2020-03-03 12:37:11Z

2

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

answered Mar 3, 2020 at 12:37

asianGeek

513 bronze badges

Comments

Eli · Accepted Answer · 2013-04-10 05:44:02Z

1

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

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

Working Demo

answered Apr 10, 2013 at 5:44

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Collectives™ on Stack Overflow

Auto hiding vertical scrollbars using css overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related