javascript - personalizar - Webkit scrollbar estilo dinámico
scrollbar height css (7)
Actualmente estoy diseñando el estilo de la barra de desplazamiento con las propiedades CSS de Webkit :: - webkit-scrollbar y me gustaría cambiar estas propiedades en un evento mousemove. El problema es que parece que no puedo encontrar una manera de llegar al CSS de la barra de desplazamiento dinámicamente.
¿Es posible diseñar dinámicamente la barra de desplazamiento del webkit, a través de javascript (posiblemente usando jQuery)?
Creé una página con cuatro pestañas en cada conjunto de colores diferentes, así como en la barra de desplazamiento, sin embargo, esto solo funcionó al dar una etiqueta de clase a cuerpo.
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
JavaScript para cada botón de pestaña (solo se muestra la sección de la barra de desplazamiento aquí)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image
Hay una buena solución para este problema, puede agregar varias clases css con estilos diferentes para la barra de desplazamiento y luego cambiar las clases dinámicamente con Javascript.
Ejemplo:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
Un botón que alterna entre las clases red y blue :
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Aquí hay un violín que funciona: http://jsfiddle.net/promatik/wZwJz/18/
Para esto debes reemplazar la barra de desplazamiento por completo.
Es solo una cuestión de elegir el que te dé la API más fácil .
Puede diseñar barras de desplazamiento con CSS3, que generalmente solo funcionan para las barras de desplazamiento internas y no para la barra de desplazamiento principal del navegador. También puede agregar el atributo MOZ a lo siguiente.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demostración: http://geryit.com/lib/custom-css3-scrollbars
Fuente de descarga: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
Si desea cambiar las propiedades de una barra de desplazamiento cuando el mouse está sobre ella. Puedes hacerlo con CSS, aquí un ejemplo http://jsfiddle.net/olgis/7Lg2R/ (perdón por el conjunto de colores feo).
Si desea cambiar el color de la barra de desplazamiento si el mouse está sobre un contenedor, mire esta barra de desplazamiento de webkit de estilo posterior en cierto estado . Se describen varias formas de hacerlo, con y sin JavaScript.
OBSERVACIÓN: no sé por qué ninguno de esos ejemplos (con CSS ni JavaScript) NO funciona en mi Firefox 11 para Mint, pero todos funcionan perfectamente en Chrome 18.0.1025.151.
Si, puedes hacerlo.
Debe incluir dinámicamente la regla de estilo css en la hoja de estilo. Y luego a cambiarlo.
Puedes hacerlo mediante este plugin.
Si no necesita usar jQuery, puede hacerlo mediante JavaScript puro: enlace 1 enlace 2 . Pero hay problemas en varios navegadores.
Ver también Configuración de reglas de pseudo-clase CSS desde JavaScript
puedes hacer una etiqueta <style> con id="scrollbar_style" y luego agregar css dentro de ella dinámicamente de esta manera:
document.getElementById(''scrollbar_style'').innerHTML = ''::-webkit-scrollbar{width:15px;}'';
solo recuerda que el uso de innerHTML en un elemento NO SOLO AÑADIRÁ tu nuevo código, TAMBIÉN BORRARÁ todo lo que haya dentro de ese elemento.
problema resuelto.