estoy intentando dar estilo a mi scroll y no lo consiguo, hay alguna manera de dar estilo al scroll que sea compatible con los navegadores? IE9+ chrome y mozilla?
La barra de desplazamiento (normalmente) son temas muy delicado ya que cada explorador lo maneja de forma diferente.
Un Custom Scrollbar o Barra de Desplazamiento Personalizada es muy posible en los navegadores actuales utilizando webkit
. Mas precicamente webkit-scrollbar
pseudo elemento no estándar.
Un pequeño ejemplo de ello siguiendo tu imagen:
/* Ancho */
::-webkit-scrollbar {
width: 15px;
}
/* Rieles */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
box-shadow: inset 0 0 1px grey;
}
/* Scroll */
::-webkit-scrollbar-thumb {
background: rgba(136, 136, 136, 0.790);
border-radius: 10px;
}
/* Scroll Selecionado */
::-webkit-scrollbar-thumb:hover {
background: rgba(136, 136, 136, 0.904);
}
/* IGNORAR (estetica de la explicacion) */
ul#container {
height: 100px;
overflow-y: auto;
}
.verde {
color:green;
}
.rojo {
color:red;
}
li {
list-style: none;
}
<ul id="container">
<li><b>Browser soportados:</b></li>
<li><span class="verde">✓ </span><b>Google Chrome</b></li>
<li><span class="verde">✓ </span><b>Safari</b></li>
<li><span class="verde">✓ </span><b>Opera</b></li>
<li><b>Browser no soportados:</b></li>
<li><span class="rojo">✖ </span><b>Firefox</b></li>
<li><span class="rojo">✖ </span><b>IE</b></li>
<li><span class="rojo">✖ </span><b>Edge</b></li><br>
<li><span>* </span>Es necesario tener en cuenta las versiones de los Browser.</li><br>
</ul>
Esto es increíble, pero tiene una pega. Como bien lo anuncia el ejemplo anterior
webkit-scrollbar
no es bien recibido por todos los navegadores.
Para solucionar esto tienes
dos alternativas:
- Ingeniárselas con CSS
- Utilizar una biblioteca externa que te permita personalizar tu Scroll.
Vamos por la primera.
A finales de 2018, hay personalización limitada disponible en Firefox!.
Esto quiere decir que nos las podemos ingeniar un poco. No sera lo mas estético pero ya es algo.
Fuente
.scroll_container {
background-color:#000000;
width:421px;
height:420px;
color:#999999;
border:2px solid #000000;
border-radius:10px;
overflow:hidden;
text-align:justify;
}
.scroll_content {
position:relative;
width:400px;
height:414px;
top:-17px;
padding:20px 10px 20px 10px;
overflow-y:auto;
}
a {
color:#C800C8;
font-size:1.2em;
float:right;
}
.top_bottom_mask {
position:absolute;
overflow:hidden;
width:17px;
height:10px;
}
.left_right_mask {
position:absolute;
width:0px;
border:1px solid #000000;
}
.corner_top_mask, .corner_bottom_mask {
position:relative;
left:-2px;
border:6px solid #000000;
height:20px;
width:13px;
border-radius:16px;
}
.corner_top_mask {
top:-3px;
left:-4px;
}
.corner_bottom_mask {
top:-18px;
left:-4px;
}
<link rel="stylesheet" href="main.css">
<div class="scroll_container">
<div class="scroll_content">
<h2>CSS Scrollbar Style</h2>
CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes.<br /><br />
Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.<br />
La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz (mediante un navegador de voz o un lector de pantalla, y dispositivos táctiles basados en el sistema Braille.<br /><br />
También se puede mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobreescribir la hoja de estilos del diseñador.<br />
La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se aplican si más de una regla coincide para un elemento en particular. Estas reglas son aplicadas con un sistema llamado de cascada, de modo que las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles.<br /><br />
La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type text/css está registrado para su uso por CSS descrito en el RFC 23185. El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.<br />
<a href="https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada" style="color:rgba(255, 246, 246, 0.616)">Wikipedia</a>
<br /><br /><br />
</div>
</div>
<div class="top_bottom_mask" style="left:413px; top:10px;">
<div class="corner_top_mask"></div>
</div>
<div class="left_right_mask" style="left:413px; top:11px; height:418px;"></div>
<div class="left_right_mask" style="left:428px; top:10px; height:418px;"></div>
<div class="top_bottom_mask" style="left:413px; top:420px;">
<div class="corner_bottom_mask"></div>
</div>
<div style="position:absolute; top:10px; left:450px;">
Browser support:
<ul>
<li>Google Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ul>
</div>
Esto funciona básicamente creado una pequeña ilusión fácil de comprender. Es aconsejable que el fondo siempre sea un color liso y no un fade o un
gradient
Esto no funcionara en IE, al parecer nunca recibió una actualizan centrada en los
Scrollbars Module.
La segunda opción, y principalmente recomendada si tienes énfasis en la
compatibilidad, es usar librerías externas.
La mayoría viene de la mano de jquery y su funcionamiento es sencillo.
Te en cuenta que cada ves estas librerías van siendo mas escasa, ya que con los nuevo exploradores no abría necesidad de usarlas.
Vamos a trabajar con
malihu
Completamente personalizable barra de desplazamiento personalizada jQuery plugin. Las características incluyen barra (s) de desplazamiento vertical y / u horizontal, impulso de desplazamiento ajustable, rueda del mouse (a través del complemento jQuery mousewheel ), soporte de teclado y táctil, temas listos para usar y personalización a través de CSS.
(function($){
$(window).on("load",function(){ //Iniciamos
$("ul#container").mCustomScrollbar({ // Seleccionamos el Scroll
theme:"dark-3" // Seleccionamos el estilo
});
});
})(jQuery);
/* IGNORAR (estetica de la explicacion) */
ul#container {
height: 100px;
overflow-y: auto;
}
.verde {
color:green;
}
.rojo {
color:red;
}
<link rel="icon" type="image/png" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<ul id="container">
<li><b>Browser soportados:</b></li>
<li><span class="verde">✓ </span><b>Google Chrome</b></li>
<li><span class="verde">✓ </span><b>Safari</b></li>
<li><span class="verde">✓ </span><b>Opera</b></li>
<li><span class="verde">✓ </span><b>Firefox</b></li>
<li><span class="verde">✓ </span><b>IE</b></li>
<li><span class="verde">✓ </span><b>Edge</b></li><br>
<li><b>Browser no soportados:</b></li>
<li><span>* </span>Independientemente de la version del Browser que se tenga mientras pueda ejecutar jquery todo funcionara.</li><br>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
Como
malihu hay muchas mas librerías, es cuestiona de ir probando.
En el caso de esta, cuenta con una serie de temas ya echos, muy estéticos,
Véase aquí.
Es compatible y vinculable con Bootstrap.
Otra pequeña demostración
(function($){
$(window).on("load",function(){ //Iniciamos
$("ul#container").mCustomScrollbar({ // Seleccionamos el Scroll
theme:"rounded-dots-dark", // Seleccionamos el estilo
autoHideScrollbar:true,
scrollInertia:1500,
});
});
})(jQuery);
/* IGNORAR (estetica de la explicacion) */
ul#container {
height: 100px;
overflow-y: auto;
font: italic small-caps bold 12px/30px Georgia, serif;
}
}
<link rel="icon" type="image/png" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<ul id="container">
<li><b>Caracteristicas Agregadas:</b></li>
<li><span>🌍 </span><b>theme:"rounded-dots-dark"</b></li><br>
<li><span>🌎 </span><b>autoHideScrollbar:true</b></li><br>
<li><span>🌏 </span><b>scrollInertia:500</b></li><br>
<li><b>Explicación:</b></li>
<li><span>🌓 </span><b>Se cambio el estilo del Scroll.</b></li><br>
<li><span>🌔 </span><b>El Scroll se desvanece al estar inactivo.</b></li><br>
<li><span>🌕 </span><b>Velocidad con la que sube y baja.</b></li><br>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
Tu código implementado con malihu
(function($){
$(window).on("load",function(){ //Iniciamos
$("#archivos").mCustomScrollbar({ // Seleccionamos el Scroll
theme:"dark-3" // Seleccionamos el estilo
});
});
})(jQuery);
#archivos {
height: 100px;
overflow-y: auto;
font: italic small-caps bold 12px/30px Georgia, serif;
}
<link rel="icon" type="image/png" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css">
<div id="box_archivos">
<div class="title">Archivos
<div class="add">
<label for="file-input">
<img src="img/add.png" width="35" height="35" alt="add">
<span class="tooltiptext1">Añadir archivos</span>
</label>
<form id="form_subir" method="POST" action="guardar.php" enctype="multipart/form-data">
<input id="file-input" type="file" name="file" multiple=""/>
</form>
</div>
<!-- fin del add -->
</div>
<!-- fin del title -->
<div class="box_megas">
<div class="barra_megas">
<div class="megas_ocupados"></div>
</div>
<!-- fin del barra_megas -->
<div id="total" class="cantidad_megas">0 / 4gb </div>
</div>
<!-- fin del box_megas -->
<div class="box_borrar">
<div class="borrar_todo">Borrar todo<img src="img/eliminar.png" class="eliminar" width="20" height="20" alt="eliminar">
</div>
</div>
<!-- fin del box_borrar -->
<div id="archivos">
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<p>Scroll...</p>
<div id="archivo" class="example" style="display:none;">
<div class="nombre_archivo"><span>Nombre del archivo</span>
<span class="tooltiptext">tooltiptext</span>
</div>
<!-- fin del nombre_archivo -->
<div class="tamano_archivo"></div>
<div class="eliminar_archivo"><img src="img/eliminar.png" class="eliminar" width="20" height="20" alt="eliminar">
</div>
<!-- fin del eliminar_archivo -->
</div>
<!-- fin del archivo -->
</div>
<!-- fin del archivos -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>