CSS - desbordamiento

Descripción

La propiedad de desbordamiento determina cómo se debe manejar el contenido que desborda el área de contenido de su elemento.

Valores posibles

visible - Se debe mostrar contenido desbordante.
hidden - No se debe mostrar contenido desbordado.
scroll - No se debe mostrar contenido desbordado, pero el agente de usuario debe proporcionar algún medio para acceder al contenido oculto (por ejemplo, un conjunto de barras de desplazamiento).
auto - El comportamiento causado por este valor depende del navegador.

Se aplica a

Todos los elementos HTML.

Sintaxis DOM

object.style.overflow = "scroll";

Ejemplo

Aquí está el ejemplo:

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
   
      <p>Example of scroll value:</p>
      
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      
   </body>
</html>

Esto producirá el siguiente resultado:

↰ Previous page