Scrollbar vertical y horizontal
Cuando en nuestra Web tengamos algún contenido que no deseemos que ocupe tanto por su importancia podríamos arreglarlo utilzando el scrollbar.
Podríamos utilizar tanto scrollbar horizantal como el vertical. El vertical suele ser más habitual ya que queda mucho mejor para la vista del usuario pero en este tutorial vamos a explicar como realizar ambos scroll’s mediante técnicas CSS.
Para obtener scroll vertical deberíamos disponer de una clase CSS que configure los anchos y altos de la caja o div de la siguiente manera:
<style type="text/css">
div.scroll_vertical {
height: 114px;
width: 114px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
</style>
La línia clave para obtener el scroll aparte del height y width es el overflow: auto.
En nuestro <body> deberíamos tener un <div> con contenido que supere el alto que hemos establecido de 114px.
<div class="scroll_vertical"> ... </div>
Y para el scroll horizontal deberemos tener más en cuenta el width intentando introducir dentro del <div> principal otro <div> o <table> más anchos que el <div> principal.
<style type="text/css">
div.scroll_horizontal {
width: 400px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
</style>
Y en el <body>:
<div class="scroll_horizontal"> ... </div>
Teniendo en cuenta que el código que vaya dentro de este <div> debe ser más ancho que el <div> principal.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Scrollbar vertical y horizontal”
Deja una respuesta
84 artículos que te podrían interesar
Ver más sobre
I like this web site very much so much superb info.