Modificar Scrollbar de un DIV

Zeuser · #1 (**permalink**) 04/10/2012, 14:33

Tengo un div con la característica:
overflow:auto;

Al tener mas contenido en la capa que su tamaño, se me crea una scrollbar.

Como puedo modificar el aspecto de esta? Pero que sea solamente la de esta capa.
Color, apariencia, anchura...

Muchas gracias.

skiper0125 · #2 (**permalink**) 04/10/2012, 14:57

Hola que tal.

Para hacerlo más óptimo puedes generar una clase y asignarla a la(s) div especiales y de esa manera no afectaría a las demás div y su modificación sería más fácil.

Saludos

Zeuser · #3 (**permalink**) 04/10/2012, 15:11

Cita:

Iniciado por skiper0125

Hola que tal.

Para hacerlo más óptimo puedes generar una clase y asignarla a la(s) div especiales y de esa manera no afectaría a las demás div y su modificación sería más fácil.

Saludos

Pero como se modifica dicha barra? no los codigos en general, sino que estructura tengo que seguir?-

Creo una nueva clase, y en ella le añado los codigos para transformar la barra? Lo he provado y no he sabido hacerlo almenos.

Algo mas de ayuda?

skiper0125 · #4 (**permalink**) 04/10/2012, 16:32

Hola que tal.

Con CSS puedes modificar las proporciones físicas del div ejemplo:

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo</title>
<style type="text/css">
	
	div
	{
		border:#666666 solid 1px;
		overflow:auto;
		height:150px;
	}
	
	.ejemplo
	{
		background:#06C;
		box-shadow: 0px 0px 5px 5px #666666;
		color:#FFFFFF;
		height:150px;
		margin:0 auto;
		width:200px;
	}
</style>
</head>
<body>
	<div class="ejemplo">
		<p>prueba 1</p>
		<p>prueba 2</p>
		<p>prueba 3</p>
		<p>prueba 4</p>
		<p>prueba 5</p>
		<p>prueba 6</p>
		<p>prueba 7</p>
		<p>prueba 8</p>
	</div>
    <br>
    <div>
    	<p>prueba 1</p>
		<p>prueba 2</p>
		<p>prueba 3</p>
		<p>prueba 4</p>
		<p>prueba 5</p>
		<p>prueba 6</p>
		<p>prueba 7</p>
		<p>prueba 8</p>
    </div>
</body>
</html>

Puedes mostrar tú código para ayudarte un poco más, ya que como comentas ya has creado clases CSS y no modifica sus características, o si lo que deseas modificas es el scroll lee esto http://www.forosdelweb.com/f13/puede...scroll-436135/

Saludos.

furoya · #5 (**permalink**) 04/10/2012, 17:07

Es una pregunta muy vieja. Podrías haber usado el buscador. Aunque por alguna razón nadie lo usa

Y eso hace que los primeros aciertos ... sean recomendaciones con enlaces a otros documentos. Pero es una manera de empezar.

site:www.forosdelweb.com scrollbar formato css

Aunque lo mejor (por ahora) es reemplazarlas por un escript. Seguramente hay alguna library probada que pueda andar.

Zeuser · #6 (**permalink**) 05/10/2012, 03:46

He usado el buscador. Y solo veo modificaciones de la scrollbar general.

Yo quiero modificar el aspecto de una scrollbar en una capa con overflow auto.
Solamente esa. Os paso el codigo para que os hagais una idea:

Cita:

Y ahora el css:

Cita:

.recomendadas{

position:relative;
float: right;
width: 250px;
height:300;
background: #FFF ;
border: 1px solid #FFF;
border-radius: 0px 0px 5px 5px;
margin: 0 30 20 0;
box-shadow: 0px 5px 15px #333333;
-moz-box-shadow:0px 5px 15px #333333;
overflow:auto;

}

Este es el css del recomendadas, del resto no creo que hagan falta porque el overflow esta en esta capa.

Como modifico la scrollbar de esta capa en cuestión? Gracias

furoya · #7 (**permalink**) 05/10/2012, 09:09

Cita:

Iniciado por Zeuser

He usado el buscador. Y solo veo modificaciones de la scrollbar general.

Yo quiero modificar el aspecto de una scrollbar en una capa con overflow auto.

Sip. Son la misma. Tratá de entender los códigos. Aunque no sean CSS estandarizado, y no funcionen en todos y cada uno de los navegadores, se pueden interpretar. Hay que hacer un esfuercito por aprender CSS.

Igual -insisto- si vas a hacer una página 'industrial', vas a caer en un escript que las reemplace. Especialmente si es para una capa solamente.

Es una lástima que FF no las acepte. Acá tengo una que se basa en XUL, que no la hice yo y no recuerdo dónde la encontré; pero de momento es para Chr.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
#div1 {-webkit-box-align: stretch; background-color: yellow; height:300px; width: 50%; 
border: 2px solid black; }

#div2 {-webkit-box-align: center; background-color: red; width: 50%; 
border: 2px solid black; }

::-webkit-scrollbar {
    margin-right: 5px;
    background-color: #bdd9d5;
	border-radius: 6px;
    width: 12px;
}
::-webkit-scrollbar-track {
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    border: 1px #eee solid;
    border-radius: 12px;
    background: #C7573A;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
    -webit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #bbb;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
}
::-webkit-scrollbar-thumb:hover { 
	background: #b7472A; 
}	
pre {
	width: 600px;
	height: 200px;
	overflow:auto;
}
</style>
</head>
<body>
<pre><div id=div1> <div id=div2>qwertyuiop</div> </div></pre>
</body>
</html>

Para más data, podés ver alguno de los enlaces relacionados que encontraste en la búsqueda, un ejemplo hecho por mí en un tema debe haber. Aunque no sé si le puse comentarios.

memoadian · #8 (**permalink**) 05/10/2012, 11:04

Para el caso de añadir scrollbars personalizados, podrias usar una libreria

JQuery scrollbar

hay varios scripts, eso te hace compatibles con todos los navegadores pero, igual si es para una sola cosa de toda tu web igual no vale la pena.

Zeuser · #9 (**permalink**) 05/10/2012, 14:55

Estoy intentando usar este:

http://www.aplweb.co.uk/blog/js/scrollbars-v2/

donde hay una carpeta con css, otra con el jquery llamada js, y un html.

Pues bien, he codigo el codigo del html de las div, y el script y los he puesto en mi web.
La capa aparece, pero el scroll no aparece por ningún lado. He provado otro script y el scroll aparecía pero no se movía. No se si hago algo mal.

la carpeta js, con el archivo .js por un lado.
la carpeta con los css correspondientes por otro.
Y diria que lo linkeo todo correctamente, pero ni rastro.

Que puede ser?

pzin · #10 (**permalink**) 05/10/2012, 16:07

Cita:

Iniciado por Zeuser

la carpeta js, con el archivo .js por un lado.
la carpeta con los css correspondientes por otro.
Y diria que lo linkeo todo correctamente, pero ni rastro.

¿Haces la llamada a scrollbars() desde tu elemento? Pregunto porque no haces mención a ello.

A mí no me funciona el scroll horizontal en ese ejemplo. Me funciona si uso las flechas y la barra, pero no si uso el scroll del ratón —en la vertical sí, pero no así en la horizontal.

furoya · #11 (**permalink**) 05/10/2012, 19:45

Por eso hablé de "una probada". La mayoría de las que dan vueltas por ahí están atadas con alambre, y no son compatibles con todos los diseños. ¿Buscaste en las que se hicieron acá en el Foro, Zeuser?. Quizá haya alguna que se pueda actualizar.

(La verdad es que no me acuerdo si alguien se tomó el trabajo de simular una, pero hay tanta cosa rara en este Foro, que seguro una deben haber armado.)