Webkit scrollbar dynamic styling

Actualmente estoy diseñando la barra de desplazamiento usando 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 la forma de acceder al CSS de la barra de desplazamiento de forma dinámica.Webkit scrollbar dynamic styling

¿Es posible diseñar la barra de desplazamiento de webkit dinámicamente, a través de javascript (posiblemente usando jQuery)?

Fuente

2011-03-02 rcabaco

Puede ser que esto puede ayudar .. Inserte el estilo dinámicamente en el cuerpo en su desplazamiento del ratón http://stackoverflow.com/questions/1212500/jquery-create -css-rule-class-runtime – Amitd

Para esto, debe reemplazar la barra de desplazamiento por completo.

Es solo una cuestión de picking whichever one gives you the easiest API.

Fuente

2012-07-14 00:29:12

¡Gracias por tu contribución! Pero desafortunadamente personalmente no quiero usar jQuery. – Sebas

@Sebas la pregunta original sais '" posiblemente usando jQuery "' –

sí, * posiblemente *. ¡Gracias por tu contribución! – Sebas

Sí, puedes hacerlo.

Debe incluir dinámicamente la regla de estilo CSS en la hoja de estilo. Y luego cambiarlo.

Puede hacerlo por this plugin

Si no necesita utilizar jQuery - usted puede hacerlo por pura Javascript: link 1 link 2. Pero hay problemas entre navegadores.

Véase también Setting CSS pseudo-class rules from JavaScript

Fuente

2012-07-14 11:07:27 Rustam

gracias, no me gusta y no lo usaré, pero esta es de hecho la única solución en este momento. – Sebas

Si desea cambiar el inmueble barra de desplazamiento cuando el ratón está sobre ella. Puede hacerlo con CSS, aquí un ejemplo http://jsfiddle.net/olgis/7Lg2R/ (lo siento 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 publicación Style webkit scrollbar on certain state. Se describen varias formas de hacerlo, con y sin JavaScript.

OBSERVACIÓN: No sé por qué razón ninguno de esos ejemplos (con CSS ni JavaScript) NO funcionan en mi Firefox 11 para Mint, pero todos funcionan perfectamente en Chrome 18.0.1025.151.

Fuente

2012-08-13 14:54:14 olgis

Puede personalizar las barras de desplazamiento con CSS3, estas generalmente solo funcionan para 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
Descargar Fuente: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

Fuente

2012-08-14 18:38:43 matt

Hay una buena solución para este problema, puede agregar varias clases CSS con estilos tímidas de la barra de desplazamiento, y luego cambiar las clases de forma dinámica con Javascript.

Ejemplo:

.red::-webkit-scrollbar { ... } 
.blue::-webkit-scrollbar { ... }

Un botón que cambia entre las clases red y blue:

$("#changecss").on("click", function(){ 
    $(".red,.blue").toggleClass("red").toggleClass("blue"); 
});

Aquí es un violín de trabajo: http://jsfiddle.net/promatik/wZwJz/18/

Fuente

2013-03-24 20:02:54

Usted puede hacer que una etiqueta <style> con id="scrollbar_style" y luego agregue css dentro de esta dinámicamente así:

document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';

sólo recuerda que el uso de innerHtml en un elemento no sólo agregará su nuevo código, que TAMBIÉN DELETE lo que había dentro de ese elemento.

problema resuelto.

Fuente

2015-07-26 11:26:28

creé la página con cuatro pestañas de cada juego de colores diferentes, así como barra de desplazamiento sin embargo, esto sólo funcionaba dando clase a la etiqueta del 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 tabulación (solo la sección de la barra de desplazamiento le muestra e)

document.getElementById("body").className="greenody"; 
.........other function().... 
document.getElementById("body").className="bluebody";

ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image

Fuente

2018-03-06 13:16:18 SparkShredder

¿Es todo tu HTML? Es posible que desee buscar más información sobre los conceptos básicos de HTML y CSS, ya que parece que no está familiarizado con el CSS básico para aplicar alturas fijas y desplazar el contenido dentro de otros elementos. En definitiva, hay muchas preguntas sin respuesta dentro de esta pregunta. – SEoF

Bueno, soy muy nuevo en esto. Solo lo hago como "pase de tiempo". Y no tenía sujeto a trabajar en ... así que solo elaboré un documento sobre mí mismo. Y lo hice casi compatible con el móvil (probado en el mío) y las pestañas (herramientas chrome dev probadas). – SparkShredder

[Rajnoor Brar] (https://drive.google.com/open?id=1mFVqZMyJbU1OrpB3oZDAi0vG8pNzDnjz) Bueno, este es el enlace a toda la web (.zip). Compruébelo. Hay más de lo que parece. @SEOF – SparkShredder

Respuesta

Cuestiones relacionadas