Auto nasconde le barre di scorrimento verticali utilizzando overflow css

Question

Mi sono imbattuto in un problema utilizzando l'overflow css per nascondere automaticamente la barra di scorrimento verticale. Ho letto in alcuni articoli per usare la pseudo classe css hover per ottenere questo comportamento e la cosa buona è che ho avuto successo in una certa misura.

Ho usato sia "scroll" che "auto" per la proprietà overflow-y. Con scroll funziona come un incantesimo, ma con 'scroll' il problema è anche se non è necessario mostrare la barra di scorrimento, è visibile che ritengo che 'auto' funzioni molto bene.

Ma di nuovo con "auto" il problema è che c'è un gap di 16px (presumo) sul lato destro. Probabilmente è la larghezza della barra di scorrimento. Volevo l'intera larghezza. Ho usato uno sfondo per spiegare il mio problema.

Ecco il violino. 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; 
} 

Apprezzare qualsiasi aiuto.

Answer 1

Questo sembra in realtà come un insetto browser per me, ma sembra funzionare come si vuole, se si aggiungi padding-right: 1px al passaggio del mouse.

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

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

Answer 2

È possibile aggiungere width: 100%; quando hover sul div:

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

Working Demo

Answer 3

Si dovrebbe compensare la barra di scorrimento con imbottitura.

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

} 

Tuttavia è meglio farlo con javascript, poiché la larghezza della barra di scorrimento può leggermente differire tra i browser. Ho usato questa soluzione con successo: How to calculate the width of the scroll bar?