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;
}
<script type='text/javascript'>
function pageScroll() {
window.scrollBy(0,50); scrolldelay = setTimeout('pageScroll()',10); }
function stopScroll() {
clearTimeout(scrolldelay);
}
function pageScrollup() {
parent.scrollBy(0,-50);
scrolldelay = setTimeout('pageScrollup()',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.
0 comentarios:
Publicar un comentario