Teniendo en cuenta esto div:muestran barras de desplazamiento sólo cuando al pasar el ratón div
<div style="overflow:auto;"></div>
Cómo puedo hacer que las barras de desplazamiento visible sólo cuando el ratón está sobre el div?
No quiero que las barras de desplazamiento siempre aparezcan. La esquina superior derecha de Facebook es un ejemplo de esto.
Puede hacer desbordamiento oculta hasta que el ratón está sobre ella, a continuación, hacer que sea automático. Esto es lo que hice ... tenga en cuenta que el relleno de 16 píxeles supone que una barra de desplazamiento tiene 16 píxeles de ancho, y está ahí para que el texto no se vuelva a ajustar cuando aparece la barra de desplazamiento.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
verlo en acción en this fiddle - usted querrá ampliar el lado de la ventana "número" derecho a ver todo el cuadro, o reducir el ancho en el css.
Editar 2014-10-23
En la actualidad existe una mayor variación en la forma de sistemas y navegadores muestran barras de desplazamiento, por lo que puede ser necesario ajustar para su caso mi espacio 16px. La intención de ese relleno es evitar que el texto vuelva a fluir a medida que la barra de desplazamiento aparece y desaparece.
Algunos sistemas, como las versiones más recientes de Mac OS X (al menos 10.8.x), no muestran las barras de desplazamiento hasta que comienzas a desplazarte al, lo que podría descartar toda esta técnica. Si la barra de desplazamiento no se muestra, es posible que no tenga motivos para ocultarla hasta que pase el mouse, o puede dejar el desbordamiento como auto o incluso scroll en lugar de alternarlo.
intente seleccionar el div con :hover selector de
#div { overflow: hidden; }
#div:hover { overflow:visible; }
He tenido el mismo problema y he intentado varias de las soluciones anteriores sin resultado. Después de mucha investigación llegué a esta solución. Simplemente pegue estas líneas en su archivo css.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Lo que me estaba pasando era que Mac OS X Lion y hasta (Me postulo Yosemite) ocultar las barras de desplazamiento automático para parecer más elegante. El código anterior sobrescribe el valor predeterminado y recupera la barra de desplazamiento ... combinado con el css para cambiar el desbordamiento para desplazarse al desplazarse por el aire, esto logrará el resultado deseado para los usuarios en los mac OSX más nuevos. Aquí hay un violín (no el mío, sino el que encontré esta respuesta). http://jsfiddle.net/simurai/UsvLN/
Se me ocurrió esta solución. Básicamente, el margen negativo corta la barra de desplazamiento vertical.
.hidden-scrollbar {
padding-right: 50px;
margin-right: -25px;
overflow-y: auto;
}
.hidden-scrollbar.hover-scrollbar:hover {
padding-right: 25px;
margin-right: 0;
overflow-y: auto;
}
MENOS mixin
.hidden-scrollbar(@padding) {
padding-right: 2 * @padding;
margin-right: [email protected];
overflow-y: auto;
&.hover-scrollbar:hover {
padding-right: @padding;
margin-right: 0;
}
}
NOTA: @padding debe ser al menos el ancho de barra de desplazamiento (por ejemplo, 25 píxeles)
Básicamente agregar esto a su MENOS/CSS y añadir el clase al elemento que necesita que se corte la barra de desplazamiento.
La respuesta con un desbordamiento cambiante tiene un montón de problemas, como el ancho incoherente del bloque interno, activación del reflujo, la necesidad de tener código adicional para tratar los rellenos y sin desactivar las interacciones del teclado (y posiblemente otras) no suspendido
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.
Este enfoque funcionó bien para mí, y es bueno que no se meta con la propiedad de desbordamiento (y todos los problemas que menciona al respecto). Pero la animación no funciona. Parece que la visibilidad no puede animar (https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working). La opacidad puede animarse, pero cuando la utilizo en esta configuración, entonces el contenido dentro.El contenido de scrollbox también se ve afectado por la opacidad (el contenido se desvanece con la barra de desplazamiento). ¿Has conseguido que la parte de la animación trabaje con este enfoque? – Rebecca
Si puede usar css para agregar overflow-y oculto en la vista normal. Luego puede agregar el evento: hover event overflow-y: auto.
Si puede utilizar Jquery utilizar el evento activable
Fragmento:
jQuery(".main_panel").hover(
function() {
jQuery(this).addClass("show_cont");
},
function() {
jQuery(this).removeClass("show_cont");
}
);.main_panel {
width: 300px;
height: 200px;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.limt {
padding: 0;
display: inline-block;
width: 90%;
margin: 0;
}
ul.limt li {
display: inline-block;
width: 100%;
font-size: 18px;
line-height: 28px;
}
.show_cont {
overflow-y: auto;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main_panel">
<ul class="limt">
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
</ul>
</div>Su solución ya ha sido descrita por respuestas anteriores. Por favor considere eliminarlo. –
#dv a{
background:url(http://dhavalvachhani.16mb.com/images/Dhaval-Vachhani.png) 0 0 no-repeat;
background-size: 100%;
display:block;
text-align: center;
color: #fff;
padding-top: 20px;;
width:500px;
height:300px;
-webkit-transition: background-position 5s ease-in-out;
-moz-transition: background-position 5s ease-in-out;
-ms-transition: background-position 5s ease-in-out;
-o-transition: background-position 5s ease-in-out;
transition: background-position 5s ease-in-out;
}
#dv a:hover {
background-position:0px 100%;
}<div id="dv">
<a href="http://dhavalvachhani.16mb.com/" target="_blank"></a>
Gracias por la solución. Lo necesitaba para uno de mi trabajo. Pero tengo un pequeño problema. El relleno de 16 píxeles derecho que has usado cuando no hay una barra de desplazamiento visible y se vuelve 0 al pasar el mouse cuando la barra de desplazamiento está visible. No quiero usar el relleno 16px por algún motivo, así que lo eliminé. La primera vez funciona bien, al pasar el div trae la barra de desplazamiento, pasar el mouse hacia afuera lo quita pero hay un espacio de 16px (supongo) a la izquierda. No sé de dónde viene la brecha. Por favor, encontrar el violín aquí http://jsfiddle.net/9scJE/ –
hice este código para mostrar la barra de desplazamiento, no sé por qué tenía que poner de desplazamiento en lugar de simplemente auto, pero eso es lo que funcionó, sin embargo no está seguro de por qué cuando Sobrevivo el área que solo muestra la barra de desplazamiento cuando me desplazo y no cuando solo coloco el cursor sobre el área div '#myautoscroll { altura máx .: 200 px; overflow-y: hidden; } #myautoscroll: hover { overflow-y: scroll; } ' – nommer