Automatyczne ukrywanie pionowych pasków przewijania za pomocą przeskakiwania css

Question

Natknąłem się na problem z wykorzystaniem przepełnienia css do automatycznego ukrywania pionowego paska przewijania. Czytałem w kilku artykułach, aby użyć pseudo klasy css hover, aby osiągnąć to zachowanie, i dobrze, że w pewnym stopniu mi się to udaje.

Użyłem zarówno "przewijania", jak i "auto" dla właściwości przepełnienia y. Z przewijaniem działa jak zaklęcie, ale z "przewijaniem" problem jest nawet wtedy, gdy nie ma potrzeby pokazywania paska przewijania, widać, że "auto" działa bardzo dobrze.

Ale znowu z "auto" problem polega na tym, że po prawej stronie znajduje się luka 16px (zakładam). Prawdopodobnie jest to szerokość paska przewijania. Chciałem pełną szerokość. Użyłem tła do wyjaśnienia mojego problemu.

Oto skrzypce. 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; 
} 

Doceń każdą pomoc.

Answer 1

To rzeczywiście wygląda na błąd przeglądarki do mnie, ale to wydaje się działać jak chcesz, jeśli po najechaniu myszką dodaj padding-right: 1px.

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

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

Answer 2

Możesz dodać width: 100%; gdy unoszą się na div:

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

Working Demo

Answer 3

powinien zrekompensować przewijania z wyściółką.

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

} 

Jednak lepiej to zrobić z javascript, ponieważ szerokość paska przewijania może się nieznacznie różnić pomiędzy przeglądarkami. Użyłem tego rozwiązania z powodzeniem: How to calculate the width of the scroll bar?