miércoles, 31 de marzo de 2010

Barra lateral de desplazamiento (Scroll)

casinotito me preguntaba la forma de añadir una barra de scroll lateral y vamos a añadirla, comenzamos añadiendo los estilos de la barra, nos situamos antes de ]]></b:skin> y añadimos:

.controlup {
top:0;
left:0;
background: #E44B98; /* ---- color de la barra ---- */
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
.controldown {
bottom:0;
left:0;
background: #E44B98; /* ---- color de la barra ---- */
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
Y después de ]]></b:skin>

<script type='text/javascript'>
function pageScroll() {
window.scrollBy(0,50); scrolldelay = setTimeout(&#39;pageScroll()&#39;,10); }
function stopScroll() {
clearTimeout(scrolldelay);
}
function pageScrollup() {
parent.scrollBy(0,-50);
scrolldelay = setTimeout(&#39;pageScrollup()&#39;,10);
}
</script>

Por último añadimos después de <body>

<input class='controlup' onmouseout='stopScroll()' onmouseover='pageScrollup()' type='button' value=''/>
<input class='controldown' onmouseout='stopScroll()' onmouseover='pageScroll()' type='button' value=''/>

Podemos ver el ejemplo en este blog de pruebas.

No hay comentarios:

Publicar un comentario