Scrollbars con CSS en Mozilla o IE?

Buen día para toda la comunidad Cristalab. Mi nombre es Agustín y soy nuevo aquí. Conocí al fundador de Cristalab.com en el Curso HTML5 en Bs As (Argentina) y no podía dejar de unirme a su comunidad.

Hoy por primera vez, quisiera apelar a la sabiduría de la comunidad para ver si se puede responder la siguiente pregunta:

¿Se puede aplicar el diseño de un scrollbar con CSS en Mozilla e IE?

Mi situación es la siguiente:

tuve que diseñar un panel de slides para un reproductor online, el cual tiene su propio scrollbar. Y ya pude aplicar el nuevo diseño en Webkit con CSS, el problema es que no puedo aplicarlo para visualizarlo en Mozilla Firefox o Internet Explorer.

Este es el código CSS que usé para modificar el slide en Chrome y Safari:

Código :

body {
    -webkit-user-select: none;
}

body > div {
    padding: 10px;
    margin: 20px;
    display: inline-block;
    /*border: 1px solid lightgray;*/
    -webkit-box-sizing: border-box;
    vertical-align: top;
    color: rgb(220, 220, 220);
    background-color: rgb(113, 141, 147);
    font-family: Verdana, sans-serif;
    font-size: 12px;
    -webkit-user-select: text;
    width: 125px;
    height: 100px;

}

::-webkit-scrollbar {
    width: 15px;
    height: 100%
}

::-webkit-scrollbar-corner {
    background-image: url(resources/corner.png);
    background-repeat: no-repeat;
}

::-webkit-scrollbar-corner:window-inactive {
    background-image: url(resources/corner-inactive.png);
}

::-webkit-resizer {
    background-image: url(resources/resizer.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

::-webkit-resizer:window-inactive {
    background-image: url(resources/resizer-inactive.png);
}

::-webkit-scrollbar-track-piece:disabled {
    display: none !important;
}

::-webkit-scrollbar-button:disabled {
    display: none !important;
}

::-webkit-scrollbar-track:disabled {
    margin: 6px;
}


/* Vertical Scrollbar Styles */

::-webkit-scrollbar:vertical {
    -webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
    border-color: transparent;
    border-width: 2px 0;
    background-image: url(resources/vertical-button-background.png);
    background-repeat: repeat-y;
}

::-webkit-scrollbar:vertical:corner-present {
    border-bottom-width: 0;
}

::-webkit-scrollbar-track:vertical:disabled:corner-present {
    margin-bottom: 5px;
}

::-webkit-scrollbar:vertical:window-inactive {
    -webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
    background-image: url(resources/vertical-button-background-inactive.png);
}

::-webkit-scrollbar-thumb:vertical {
    -webkit-border-image: url(resources/vertical-thumb.png) 13 0 13 0;
    border-color: transparent;
    border-width: 13px 0;
    min-height: 20px;
}

::-webkit-scrollbar-thumb:vertical:hover {
    -webkit-border-image: url(resources/vertical-thumb-hover.png) 13 0 13 0;
}

::-webkit-scrollbar-thumb:vertical:active {
    -webkit-border-image: url(resources/vertical-thumb-active.png) 13 0 13 0;
}

::-webkit-scrollbar-thumb:vertical:window-inactive {
    -webkit-border-image: url(resources/vertical-thumb-inactive.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:start:no-button,
.double-end::-webkit-scrollbar-track-piece:vertical:start,
.none::-webkit-scrollbar-track-piece:vertical:start {
    margin-top: 6px;
}

::-webkit-scrollbar-track-piece:vertical:end:no-button,
.double-start::-webkit-scrollbar-track-piece:vertical:end,
.none::-webkit-scrollbar-track-piece:vertical:end {
    margin-bottom: 6px;
}

::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present,
.double-start::-webkit-scrollbar-track-piece:vertical:end:corner-present,
.none::-webkit-scrollbar-track-piece:vertical:end:corner-present {
    margin-bottom: 5px;
}

:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:single-button,
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:double-button,
.single::-webkit-scrollbar-track-piece:vertical:start,
.double-start::-webkit-scrollbar-track-piece:vertical:start,
.double-both::-webkit-scrollbar-track-piece:vertical:start {
    margin-top: -6px;
}

:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:single-button,
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:double-button,
.single::-webkit-scrollbar-track-piece:vertical:end,
.double-end::-webkit-scrollbar-track-piece:vertical:end,
.double-both::-webkit-scrollbar-track-piece:vertical:end {
    margin-bottom: -6px;
}

::-webkit-scrollbar-track:vertical:disabled {
    -webkit-border-image: url(resources/vertical-track-disabled.png) 13 0 13 0;
    border-color: transparent;
    border-width: 13px 0;
}

::-webkit-scrollbar-track-piece:vertical:decrement {
    -webkit-border-image: url(resources/vertical-track.png) 13 0 13 0;
    border-color: transparent;
    border-width: 13px 0 0 0;
}

::-webkit-scrollbar-track-piece:vertical:decrement:hover {
    -webkit-border-image: url(resources/vertical-track-hover.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:decrement:active {
    -webkit-border-image: url(resources/vertical-track-active.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:increment {
    -webkit-border-image: url(resources/vertical-track.png) 13 0 13 0;
    border-color: transparent;
    border-width: 0 0 13px 0;
}

::-webkit-scrollbar-track-piece:vertical:increment:hover {
    -webkit-border-image: url(resources/vertical-track-hover.png) 13 0 13 0;
}

::-webkit-scrollbar-track-piece:vertical:increment:active {
    -webkit-border-image: url(resources/vertical-track-active.png) 13 0 13 0;
}

::-webkit-scrollbar-button:vertical {
    height: 20px;
    -webkit-border-image: url(resources/vertical-button.png) 2 0 2 0;
    border-color: transparent;
    border-width: 2px 0;
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background.png);
    background-repeat: no-repeat, repeat-y;
    background-position: 3px 3px, 0 0;
}

::-webkit-scrollbar-button:vertical:decrement:hover {
    -webkit-border-image: url(resources/vertical-button-hover.png) 2 0 2 0;
    background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-hover.png);
}

::-webkit-scrollbar-button:vertical:decrement:active {
    -webkit-border-image: url(resources/vertical-button-active.png) 2 0 2 0;
    background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-active.png);
}

::-webkit-scrollbar-button:vertical:decrement:window-inactive {
    -webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
    background-image: url(resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-inactive.png);
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background.png);
    background-repeat: no-repeat, repeat-y;
    background-position: 3px 8px, 0 0;
}

::-webkit-scrollbar-button:vertical:increment:hover {
-webkit-border-image: url(resources/vertical-button-hover.png) 2 0 2 0;
background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-hover.png);
}

::-webkit-scrollbar-button:vertical:increment:active {
    -webkit-border-image: url(resources/vertical-button-active.png) 2 0 2 0;
    background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-active.png);
}

::-webkit-scrollbar-button:vertical:increment:window-inactive {
    -webkit-border-image: url(resources/vertical-button-inactive.png) 2 0 2 0;
    background-image: url(resources/vertical-increment-arrow.png), url(resources/vertical-button-background-inactive.png);
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:start:decrement,
.double-start::-webkit-scrollbar-button:vertical:start:decrement,
.double-both::-webkit-scrollbar-button:vertical:start:decrement {
    height: 14px;
    border-bottom-width: 0;
    background-position: 3px 3px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:start:increment,
.double-start::-webkit-scrollbar-button:vertical:start:increment,
.double-both::-webkit-scrollbar-button:vertical:start:increment {
    background-position: 3px 4px, 0 0;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:decrement,
.double-end::-webkit-scrollbar-button:vertical:end:decrement,
.double-both::-webkit-scrollbar-button:vertical:end:decrement {
    background-position: 3px 8px, 0 0;
}


:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment,
.double-end::-webkit-scrollbar-button:vertical:end:increment,
.double-both::-webkit-scrollbar-button:vertical:end:increment {
    height: 14px;
    border-top-width: 0;
    background-position: 3px 4px, 0 0;
}

::-webkit-scrollbar-button:vertical:end:increment:corner-present {
    border-bottom-width: 0;
    height: 19px;
}

:not(.single)::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present,

.double-end::-webkit-scrollbar-button:vertical:end:increment:corner-present,
.double-both::-webkit-scrollbar-button:vertical:end:increment:corner-present {
    height: 13px;
}

/* Forced Scrollbar Mode Styles */

.single::-webkit-scrollbar-button:start:decrement,
.single::-webkit-scrollbar-button:end:increment {
    display: block;
}

.single::-webkit-scrollbar-button:start:increment,
.single::-webkit-scrollbar-button:end:decrement {
    display: none;
}

.double-end::-webkit-scrollbar-button:start {
    display: none;
}

.double-end::-webkit-scrollbar-button:end {
    display: block;
}

.double-start::-webkit-scrollbar-button:start {
    display: block;
}

.double-start::-webkit-scrollbar-button:end {
    display: none;
}

.double-both::-webkit-scrollbar-button {
    display: block;
}

.none::-webkit-scrollbar-button {
    display: none;
}

El scrollbar que tengo que lograr es algo así:



En Chrome y Safari se ve hermoso!

Intenté buscar algo similar para los otros motores pero no encuentro, espero que alguno de ustedes pueda (si es posible) despejar mis dudas y si no, romper mi novato corazón de desarrollador.

Desde ya muchas gracias a todos y espero sus respuestas! Saludos a toda la Comunidad!

Se ve realmente bonito, me encantó.

En un proyecto que estuve trabajando recientemente me pedían un scrollbar personalizado. Encontré jScrollPane, es una librería cross browser hecha con jQuery y CSS para darle estilos a los scrollbars de un div con overflow.

Lo que te puedo recomendar es hacer un div y aplicar este plugin a tu div, olvidarte de la altura de tu body y concentrar todo dentro del contenedor.

Espero esta solución te ayude, cuéntanos como te fue o que otra solución encontraste.
Suerte.

Kinduff escribió:

Gracias por la respuesta rápida.

Creo que uno de mis problemas es que el contenido de mi slider viene desde una base de datos que se carga en un Grid que está en otro html. Básicamente lo que ves ahi son 3 partes: La parte de arriba que es fija (donde dice "Slides" y "Time"), la parte de abajo que tiene la sombra, y la parte del medio es un iframe que muestra en el source el html en donde se carga cada dato. Creeme que se nos hace imposible trasladar todo el proceso a un solo lugar, por la forma en la que está armado y el deadline que se nos viene encima.

A lo que quería llegar con esto es que ya había probado jScrollPane y por alguna razón no estaba funcionando. Tal vez choca de alguna forma con lo que se desarrolló anteriormente o con el iFrame. Sinceramente desconozco, pero aparentemente jScrollPane es la mejor solución según todas las consultas que hice.

Voy a seguir intentando, mientras tanto no me ofendería leer más recomendaciones si es que alguno las tiene.

Nuevamente, muchas gracias por la pronta respuesta. Saludos a todos!

No utilices iframes, son conflictivos. En lugar de eso utiliza load(); de jQuery. Es posible hacer la transformación, si posteas un boceto de tus elementos yo te ayudo a arreglarlo.