Entrar

Crear un overflow: auto con un scroll vertical personalizado

willy · · Solicitar retirada
No he podido encontrar este tema con exactitud en el foro.
Me gustaría crear un overflow: auto con un scroll vertical personalizado, que no sea la típica barrita azul que me destroza el diseño, algo personalizado tanto en la barra (quizás una flechita en vez de la barra) como en el color, en definitiva algo más discreto y personal.

Por favor soy muy novato y no tengo casi idea de estilos, os pido mucha claridad.

Mil gracias por adelantado

Willy
Willy
ricky · · Solicitar retirada
No se puede con css, tu no pones la barra de scroll, la pone el navegador, por lo tanto se usa la que el tiene.... pero busca algo de js seguro ahi por ahi encuentras algo en jquery..
ricky · · Solicitar retirada
ricky escribió:No se puede con css, tu no pones la barra de scroll, la pone el navegador, por lo tanto se usa la que el tiene.... pero busca algo de js seguro ahi por ahi encuentras algo en jquery..

el amigo NO quiere personalizar la barra del navegador (que de por si se ve horrible), quiere un div con overflow:auto a forma de caja con scroll, por eso le digo que es el navegador el que define que estilo tendra ese scroll en esa etiqueta que es en si, la misma que tiene para donde la necesite. para un div con overflow:auto NO se puede.
willy · · Solicitar retirada
Gracias amigos por vuestra ayuda. No sé si nos referimos a lo mismo, pero creo que sí conseguí lo que quería con el mismo enlace que me habéis pasado http://www.hesido.com/web.php?page=customscrollbar una barra personalizada. He elegido la "minimal" poniendo los colores a mi gusto. Os muestro la página en construcción donde podéis ver la barra que he creado http://www.octopusgarden.es/queescastellano.htm
Lo que no sé muy bien es si se ve bien en todos los navegadores, con Safari, que es el que utilizo yo, sí que se ve bien. ¿Me podéis confirmar como lo veis? Si no es así ¿Cómo puede visualizarse bien en todos los navegadores?

Muchas gracias por vuestra ayuda.

Os paso los códigos CSS que he utilizado para la barra junto con un js que encontré en esta web (no sé muy bien lo que es esto ni de que va lo del js pero me ha funcionado)... La suerte del novato


#fondotextos {
/* Typical fixed height and fixed width example */
width: 350px;
height: 550px;
overflow: auto;
/* IE overflow fix, position must be relative or absolute*/
position: relative;
background-color: none;/* color fondo texto*/
margin:0px 0px 0px 0px;
padding:0px 30px 0px 30px;
float:left;
}

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;/* posicion barra verde*/}

.vscrollerbase {
width:10px;
background-color: #efeea6; /* color barra blanca*/}

.vscrollerbar {
width: 10px;
background-color: #97bf0d;/* color barra verde*/}
Willy
Web-Freelance · · Solicitar retirada
Me alegro que te sirviese. Lo veo bien en Firefox, Chrome, IE, Opera y Safari. Aunque en mi opinión la barra se mimetiza demasiado con el diseño, y no da aspecto de barra para saber que se puede desplazar. Pero bueno, este no es el foro de críticas, jejeje.

Saludos!
willy · · Solicitar retirada
Me alegra que se vea bien. En cuanto a lo que me comentas de la barra, también lo había pensado yo, que debido a su diseño tan minimalista pueda dar problemas para entender que se trata de una barra. Quizás le ponga una flecha pequeña debajo de la barra (si lo sé hacer, je, je...).

La crítica que me haces, diría mejor la sugerencia, es muy útil y positiva.

Gracias de nuevo.

Saludos
Willy
Web-Freelance · · Solicitar retirada
Mucho mejor. Ahora sí las pudieses poner funcionales (las flechas) quedaría de 10.

O se me ocurre que también puede quedar bien delimitar el div con un borde del color del fondo de la barra. También crearía la sensación de que es una barra.

Saludos!
Web-Freelance · · Solicitar retirada
Bueno yo decía un borde a todo el cuadro del div, pero así también aumenta la visión de barra ;-)

Saludos!
willy · · Solicitar retirada
Si, si, te entendí, pero yo soy muy sobrio en mis diseños y creo que es suficiente junto con las flechas para darse cuenta que es una barra de desplazamiento.

Lo que me preocupa ahora es que me han dicho que en algún navegador (IE) se encuentran solapados y desplazados los textos del menú con algunas flores. Ya sabes, las incompatibilidades de los diferentes navegadores... pero este es otro tema que ya intentaré resolver. Bueno si sabes algo de esto te lo agradezco por adelantado.


Gracias y saludos
Willy
Web-Freelance · · Solicitar retirada
El problema es que esas flores forman parte del fondo de la página, y no todos los navegadores toman las mismas medidas de li ul margin border, etc, etc, etc, con lo que siempre tendrás problemas con alguno. No es una buena práctica la que utilizas. En lugar de eso, trata de dejar el fondo solo el pulpo, el verde manzana lo creas con background-color y así le bajas peso a la carga de la página. Para el menú lateral crea un fondo para un div de ese tamaño que colocarías ahí, y para las flores del pié crea otro div a modo de pié de página que contendrá eso mismo. Son consejos, tómalos o déjalos... ajjaja ;-)

Saludos!
willy · · Solicitar retirada
Cada día se aprende...
Intentaré seguir tus consejos en cuanto al menú lateral que es donde hay problemas y crearé un div para esta la franja ¿Debo crear un div para cada una de las flores del menú?

En cuanto al resto del fondo y las flores de pie no me da problemas ya que es simplemente un fondo inamovible (con pulpo, flores y fondos) que pesa solo 33 KB y se carga rapidísimo.

Gracias por tu gran ayuda

Un novato
Willy
Web-Freelance · · Solicitar retirada
Bueno, yéndonos a lo fácil, si no te quieres liar mucho puedes crear una pequeña tabla de una columna y tantas filas como elementos y flores tenga. Las intercalas y siempre te quedarán cada una debajo de cada elemento de menú. Si tengo un rato te hago el código con div y estilos posicionando la imagen entera con el efecto sprite para que lo veas.

Saludos!