Camuflar scroll bar con CSS

mariaanie · #1 (**permalink**) 20/04/2009, 16:09

Como podria darle estilo a un scroll bar para que solo se pueda ver las dos flechas de arriba y abajo, esto viene a razon de que tengo que integrar un scroll bar en mi web y quiero disimularlo lo maximo posible, agradeceria cualquier consejo, muchas gracias y un saludo.

Bam_Margera · #2 (**permalink**) 21/04/2009, 00:22

Pues bueno,

ya que agradeces cualquier consejo; yo uso:

Cita:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
background: url(../img1/fondo.jpg) no-repeat;

scrollbar-arrow-color: #cccccc;
scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #222222;
scrollbar-track-color: #666666;
scrollbar-face-color: #999999;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #FFE3B9;
scrollbar-3d-light-color: #FFFFFF;
background-color: #B0BECB;

}

con eso le das algo de estilo, pero a mi solo me va en IE (firefox, ni se entera..)

kseso? · #3 (**permalink**) 21/04/2009, 04:32

No me hagas mucho caso, mariaanie, pues es una idea a bote pronto y sin evaluarla.

Si lo que quieres es tapar la "guía de recorrido" y dejar sólo visibles las flechas superior e inferior, se me ocurre ¿se podría lograr "tapando" la guía con un div colocado en posición absoluta sobre ella?

Pero ya te dije que es solo una idea, lógicamente sólo sería util para scrolls de elementos contenidos en la página.

kseso? · #4 (**permalink**) 21/04/2009, 11:36

Me pudo la curiosidad y aquí va el código para "tapar la guía" del scroll:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>ocultar scroll</title>
 
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
body {background: #fff;}
#contenedor {width: 200px; height: 200px; overflow: auto;}
#tapa {position: absolute; width: 20px; height:166px; left: 183px; top: 17px; background:#fff;}
p {color: #000}
 
</style>
</head>
<body>
<div id="contenedor">
<p><p>Lorem ipsum dolor sit amet consectetuer nunc convallis nunc nulla tincidunt. Id Curabitur gravida ac senectus condimentum Phasellus Aliquam condimentum ante nibh. Nullam condimentum nunc commodo elit dolor urna metus Fusce ipsum volutpat. Rhoncus metus Curabitur et laoreet Phasellus tempus dignissim est pellentesque adipiscing. Eget suscipit magna pretium facilisi justo Curabitur sit mattis sit eget. Dictumst Maecenas et.</p>
<p>Vel Vestibulum Duis congue laoreet vestibulum elit quis aliquam tincidunt in. Pellentesque dui a turpis pellentesque sed Vestibulum vitae nibh nibh adipiscing. Nec a Vivamus velit consectetuer wisi nibh et Donec eros magna. Quisque dui semper Nunc laoreet Vestibulum vitae sit Nam enim laoreet. Wisi Vestibulum auctor id Sed est et turpis sociis fringilla at. Nunc penatibus pede et Morbi tortor justo.</p>
<p>Et non sit Aenean dictum risus pretium tortor nulla amet sed. Id parturient quis Sed vitae risus ridiculus pretium Integer interdum volutpat. Lorem Cras est molestie in tortor vitae sociis interdum libero justo. Integer Nulla Donec ipsum tristique Morbi urna pede a malesuada Phasellus. Dui justo magna nibh molestie laoreet ullamcorper semper Suspendisse et Praesent. Suspendisse Ut ornare felis ultrices tristique a sapien et sed ac. Magnis hac.</p>
<p>Mauris dolor sit est sem justo tortor Phasellus ac eros libero. Nascetur semper Sed ipsum Pellentesque ut laoreet wisi Integer adipiscing eros. Vestibulum ligula eu suscipit neque lacus accumsan In Quisque ligula Aliquam. Id lacinia Mauris lacus fringilla eros facilisi sapien tristique tempor pede. Tempor Vestibulum auctor nonummy augue ut Vestibulum interdum sed eu Pellentesque. Id platea pretium semper Nunc dolor Nunc Aenean sit Proin et. </p>
</p>
</div>
<div id="tapa"></div>
</body>
</html>

y este es el resultado en opera 9, FF 3 e IE 7:

Pero otra cosa es que sea práctico y funcional en otras situaciones.

Bam_Margera · #5 (**permalink**) 22/04/2009, 00:58

wow, pero a ver, has calculado la posición de la 'tapa' a ojo o cómo?

me gusta :D

mariaanie · #6 (**permalink**) 22/04/2009, 07:22

Gracias por la respuesta me ha sido de gran ayuda, un saludo a todos

kseso? · #7 (**permalink**) 22/04/2009, 10:43

Cita:

Iniciado por Bam_Margera

has calculado la posición de la 'tapa' a ojo o cómo?

En este caso es sencillo calcular la posición de #tapa, pues al tener posición absoluta y ser hijo directo del body, su punto 0,0 (el origen) es el mismo que #contenedor del que sé las medidas y por lo tanto su final.

mariaanie, me alegra que este "divertimento" te haya servido.

Pero en un documento más complejo y con una posición más incierta habría que currarlo algo más.

Un saludo

gabriel0420 · #8 (**permalink**) 21/09/2009, 16:28

oie pero si mi fondo digamos que tiene decoracion!

kseso? · #9 (**permalink**) 21/09/2009, 16:55

Gabriel, si ya tienes un tema abierto por ti, no disperses la ayuda que puedas obtener rescatando éste.

Un saludo