Le barre di scorrimento sono visibili solo quando si passa il mouse su un div?

Question

Sto cercando di capire come avere un div scorrevole che mostra solo le barre di scorrimento quando si libra.

L'esempio è la ricerca di immagini di Google, nell'immagine seguente è possibile vedere come la barra laterale di sinistra non sembra essere in grado di scorrere finché non si passa il mouse sopra di essa.

Ciò è possibile con CSS o è necessario Javascript? Se possibile, forse un rapido esempio su come fare un simile compito?

Answer 1

#div { overflow:hidden;height:whatever px; } 
#div:hover { overflow-y:scroll; } 

Sarebbe qualcosa di simile lavoro?

Answer 2

Credo che qualcosa di simile

$("#leftDiv").mouseover(function(){$(this).css("overflow","scroll");}); 
$("#leftDiv").mouseout(function(){$(this).css("overflow","hidden");}); 

Answer 3

Dare il div un'altezza fissa e srcoll: hidden; e al passaggio del mouse cambia lo scorrimento in automatico;

#test_scroll{ height:300px; overflow:hidden;} 
#test_scroll:hover{overflow-y:auto;} 

Ecco un esempio. http://jsfiddle.net/Lywpk/

Answer 4

Se sei solo alla preoccupazione per mostrare/nascondere, questo codice avrebbe funzionato bene:

$("#leftDiv").hover(function(){$(this).css("overflow","scroll");},function(){$(this).css("overflow","hidden");}); 

Tuttavia, potrebbe modificare alcuni elementi nel vostro progetto, nel caso in cui si utilizza width = 100%, considerando che nascondendo la barra di scorrimento, si crea un po 'più spazio per la larghezza.

Answer 5

La risposta con cambio di overflow ha un sacco di problemi, come la larghezza inconsistente del blocco interno e l'attivazione del reflow.

C'è un modo più semplice per avere lo stesso effetto che non farebbe scattare reflow mai: utilizzando visibility proprietà e blocchi annidati:

.scrollbox { 
    width: 10em; 
    height: 10em; 
    overflow: auto; 
    visibility: hidden; 
} 
.scrollbox-content, 
.scrollbox:hover { 
    visibility: visible; 
} 

Ecco una penna con un esempio di lavoro: http://codepen.io/kizu/pen/OyzGXY

altro La caratteristica di questo metodo è che visibility è animabile, quindi possiamo aggiungere una transizione ad esso (vedere il secondo esempio nella penna sopra). Aggiungere una transizione sarebbe meglio per UX: la barra di scorrimento non apparirà immediatamente quando si librerà mentre si sta spostando su un altro elemento, e sarebbe più difficile perdere la barra di scorrimento quando la si mira con il puntatore del mouse, poiché non si nasconderà immediatamente come bene.

Answer 6

Un trucco per questo, per i browser Webkit, è quello di creare una barra di scorrimento invisibile, e quindi farlo apparire al passaggio del mouse. Questo metodo non influisce sulla larghezza dell'area di scorrimento poiché lo spazio necessario per la barra di scorrimento è già presente.

Qualcosa di simile a questo:

.scrolling-div { 
    &::-webkit-scrollbar { 
    background-color: transparent; 
    width: 10px; 
    } 
&::-webkit-scrollbar-thumb { 
    background-color: transparent; 
} 

}

.scrolling-div:hover { 
&::-webkit-scrollbar-thumb { 
    background-color: black; 
} 

}

codepen example