Cuando en nuestra Web tengamos alg\u00fan contenido que no deseemos que ocupe tanto por su importancia podr\u00edamos arreglarlo utilzando el scrollbar.<\/p>\n
Podr\u00edamos utilizar tanto scrollbar horizantal como el vertical. El vertical suele ser m\u00e1s 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\u00e9cnicas CSS.<\/p>\n
Para obtener scroll vertical deber\u00edamos disponer de una clase CSS que configure los anchos y altos de la caja o div de la siguiente manera:<\/p>\n
<style type=\"text\/css\">\r\ndiv.scroll_vertical {\r\n\theight: 114px;\r\n\twidth: 114px;\r\n\toverflow: auto;\r\n\tborder: 1px solid #666;\r\n\tbackground-color: #ccc;\r\n\tpadding: 8px;\r\n}\r\n<\/style><\/pre>\nLa l\u00ednia clave para obtener el scroll aparte del height y width es el overflow: auto.<\/p>\n
En nuestro <body> deber\u00edamos tener un <div> con contenido que supere el alto que hemos establecido de 114px.<\/p>\n
<div class=\"scroll_vertical\">\r\n...\r\n<\/div><\/pre>\nY para el scroll horizontal deberemos tener m\u00e1s en cuenta el width intentando introducir dentro del <div> principal otro <div> o <table> m\u00e1s anchos que el <div> principal.<\/p>\n
<style type=\"text\/css\">\r\ndiv.scroll_horizontal {\r\n\twidth: 400px;\r\n\toverflow: auto;\r\n\tborder: 1px solid #666;\r\n\tbackground-color: #ccc;\r\n\tpadding: 8px;\r\n}\r\n<\/style><\/pre>\nY en el <body>:<\/p>\n
<div class=\"scroll_horizontal\">\r\n...\r\n<\/div><\/pre>\nTeniendo en cuenta que el c\u00f3digo que vaya dentro de este <div> debe ser m\u00e1s ancho que el <div> principal.<\/p>\n