¿Las barras de desplazamiento solo son visibles cuando una Div está suspendida?

Question

Estoy tratando de averiguar cómo tener un div desplazable que solo muestra sus barras de desplazamiento cuando está suspendido.

Ejemplo es la búsqueda de imágenes de Google, en la imagen a continuación puede ver cómo la barra lateral izquierda no parece ser desplazable hasta que pase el mouse sobre ella.

¿Es esto posible con CSS o es necesario Javascript? Si es posible, tal vez un ejemplo rápido de cómo hacer tal tarea?

Answer 1

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

¿Podría algo así como que el trabajo?

Answer 2

Creo que algo así como

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

Answer 3

Dar el div una altura fija y srcoll: hidden; y al pasar el cursor, cambie el desplazamiento a automático;

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

Aquí hay un ejemplo. http://jsfiddle.net/Lywpk/

Answer 4

Si usted es la única preocupación de mostrar/ocultar, el código funcionaría bien:

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

Sin embargo, podría modificar algunos elementos en su diseño, en caso de que esté utilizando width = 100%, teniendo en cuenta que cuando oculta la barra de desplazamiento, crea un poco más de espacio para su ancho.

Answer 5

La respuesta con el cambio de desbordamiento tiene un montón de problemas, como el ancho incoherente del bloque interno y la activación del reflujo.

hay una manera más fácil tener el mismo efecto que no daría lugar a reflujo nunca: el uso de visibility propiedad y bloques anidados:

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

Aquí es una pluma con un ejemplo de trabajo: http://codepen.io/kizu/pen/OyzGXY

Otro La característica de este método es que visibility es animable, por lo que podemos agregarle una transición (vea el segundo ejemplo en el lápiz anterior). Agregar una transición sería mejor para UX: la barra de desplazamiento no aparecerá de inmediato cuando esté suspendida mientras se mueve hacia otro elemento, y sería más difícil pasar por alto la barra de desplazamiento al apuntarla con el cursor del mouse, ya que no se ocultará inmediatamente como bien.

Answer 6

Un truco para esto, para los navegadores webkit, es crear una barra de desplazamiento invisible, y luego hacer que aparezca en vuelo estacionario. Este método no afecta el ancho del área de desplazamiento ya que el espacio necesario para la barra de desplazamiento ya está allí.

Algo como esto:

.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