HTML | Propiedad de desbordamiento de estilo DOM – Part 1

Posted on by Rudeus Greyrat

La propiedad Style overflowY en HTML DOM se usa para especificar el comportamiento del contenido cuando desborda los bordes superior e inferior de un elemento. El contenido puede estar oculto, mostrado o una barra de desplazamiento según el valor. 

Sintaxis:

  • Devuelve la propiedad overflowY.
object.style.overflowY
  • Se utiliza para establecer la propiedad overflowY.
object.style.overflowY = "scroll|hidden|visible|auto|initial|inherit"

Valores devueltos: Devuelve un valor de string, que representa la propiedad overflow-y de un elemento

Valores de propiedad:

  • desplazamiento: el contenido se recorta para ajustarse al cuadro del elemento y se proporciona una barra de desplazamiento para ayudar a desplazar el contenido extra desbordado. La barra de desplazamiento aquí se agrega incluso si el contenido no está recortado.

Ejemplo: 

HTML

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style overflowY Property
    </title>
     
    <style>
        .content {
            background-color: lightgreen;
            height: 150px;
            width: 200px;
            overflow-y: hidden;
        }
 
        button {
            margin-top: 60px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
     
    <b>DOM Style overflowY Property</b>
     
    <p>
        The overflowY property specifies the
        behavior of content when it overflows
        a block-level element’s top and
        bottom edges.
    </p>
     
    <div class = "content">
        GeeksforGeeks is a computer science portal
        with a huge variety of well written and
        explained computer science and programming
        articles, quizzes and interview questions.
        <br>The portal also has dedicated GATE
        preparation and competitive programming
        sections.
    </div>
     
    <button onclick = "myGeeks()">
        Change overflowY
    </button>
     
    <!-- script to create overflowY -->
    <script>
        function myGeeks() {
            elem = document.querySelector('.content');
            elem.style.overflowY = 'scroll';
        }
    </script>
</body>
 
</html>                   
  • Salida: Antes de hacer clic en el botón:

  

Después de hacer clic en el botón: 

scroll-after

  • oculto: el contenido se recorta y se oculta para ajustarse al elemento. No se proporcionan barras de desplazamiento cuando se utiliza este valor. 

Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style overflowY Property
    </title>
     
    <style>
        .content {
            background-color: lightgreen;
            height: 150px;
            width: 200px;
        }
 
        button {
            margin-top: 60px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
     
    <b>DOM Style overflowY Property</b>
     
    <p>
        The overflowY property specifies the
        behavior of content when it overflows
        a block-level element’s top and
        bottom edges.
    </p>
     
    <div class = "content">
        GeeksforGeeks is a computer science portal
        with a huge variety of well written and
        explained computer science and programming
        articles, quizzes and interview questions.
        <br>The portal also has dedicated GATE
        preparation and competitive programming
        sections.
    </div>
     
    <button onclick = "myGeeks()">
        Change overflowY
    </button>
     
    <!-- script to create overflowY -->
    <script>
        function myGeeks() {
            elem = document.querySelector('.content');
            elem.style.overflowY = 'hidden';
        }
    </script>
</body>
 
</html>                   
  • Salida: Antes de hacer clic en el botón:

 hidden-before 

Después de hacer clic en el botón:

 hidden-after

  • visible: el contenido no se recorta y puede desbordarse hacia la parte superior o inferior del elemento que lo contiene. 

Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style overflowY Property
    </title>
     
    <style>
        .content {
            background-color: lightgreen;
            height: 150px;
            width: 200px;
            overflow-y: hidden;
        }
 
        button {
            margin-top: 60px;
        }
    </style>
</head>
 
<body>
    <h1 style = "color: green">
        GeeksforGeeks
    </h1>
     
    <b>DOM Style overflowY Property</b>
     
    <p>
        The overflowY property specifies the
        behavior of content when it overflows
        a block-level element’s top and bottom
        edges.
    </p>
     
    <div class = "content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. <br>The portal
        also has dedicated GATE preparation
        and competitive programming sections.
    </div>
     
    <button onclick = "myGeeks()">
        Change overflowY
    </button>
     
    <!-- script to use oveflowY property -->
    <script>
        function myGeeks() {
            elem = document.querySelector('.content');
            elem.style.overflowY = 'visible';
        }
    </script>
</body>
 
</html>                   
  • Salida: Antes de hacer clic en el botón:

 visible-before 

Después de hacer clic en el botón:

 visible-after

  • auto: el comportamiento de auto depende del contenido y las barras de desplazamiento se agregan solo cuando el contenido se desborda. 

Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style overflowY Property
    </title>
     
    <style>
        .content {
            background-color: lightgreen;
            height: 150px;
            width: 200px;
        }
 
        button {
            margin-top: 60px;
        }
    </style>
</head>
 
<body>
    <h1 style = "color: green">
        GeeksforGeeks
    </h1>
     
    <b>DOM Style overflowY Property</b>
     
    <p>
        The overflowY property specifies the
        behavior of content when it overflows
        a block-level element’s top and bottom
        edges.
    </p>
     
    <div class = "content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. <br>The portal
        also has dedicated GATE preparation
        and competitive programming sections.
    </div>
     
    <button onclick = "myGeeks()">
        Change overflowY
    </button>
     
    <!-- script to use oveflowY property -->
    <script>
        function myGeeks() {
            elem = document.querySelector('.content');
            elem.style.overflowY = 'auto';
        }
    </script>
</body>
 
</html>                   
  • Salida: Antes de hacer clic en el botón:

 auto-before 

Después de hacer clic en el botón:

 auto-after

  • initial: establece la propiedad overflowY de estilo en su valor predeterminado. 

Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style overflowY Property
    </title>
     
    <style>
        .content {
            background-color: lightgreen;
            height: 150px;
            width: 200px;
            overflow-y: scroll;
        }
 
        button {
            margin-top: 60px;
        }
    </style>
</head>
 
<body>
    <h1 style = "color: green">
        GeeksforGeeks
    </h1>
     
    <b>DOM Style overflowY Property</b>
     
    <p>
        The overflowY property specifies the
        behavior of content when it overflows
        a block-level element’s top and bottom
        edges.
    </p>
     
    <div class = "content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. <br>The portal
        also has dedicated GATE preparation
        and competitive programming sections.
    </div>
     
    <button onclick = "myGeeks()">
        Change overflowY
    </button>
     
    <!-- script to use oveflowY property -->
    <script>
        function myGeeks() {
            elem = document.querySelector('.content');
            elem.style.overflowY = 'initial';
        }
    </script>
</body>
 
</html>                   
  • Salida: Antes de hacer clic en el botón: 

initial-before 

Después de hacer clic en el botón:

 initial-after

  • heredar: Esto hereda la propiedad de su padre. 

Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style overflowY Property
    </title>
     
    <style>
        #parent {
             
            /* setting the parent div
            to 'auto' */
            overflow-y: auto;
        }
 
        .content {
            background-color: lightgreen;
            height: 150px;
            width: 200px;
        }
 
        button {
            margin-top: 60px;
        }
    </style>
</head>
 
<body>
    <h1 style = "color: green;">
        GeeksforGeeks
    </h1>
     
    <b>DOM Style overflowY Property</b>
     
    <p>
        The overflowY property specifies the
        behavior of content when it overflows
        a block-level element’s top and bottom
        edges.
    </p>
     
    <div id = "parent">
        <div class = "content">
            GeeksforGeeks is a computer science
            portal with a huge variety of well
            written and explained computer science
            and programming articles, quizzes and
            interview questions. <br>The portal
            also has dedicated GATE preparation and
            competitive programming sections.
        </div>
    </div>
     
    <button onclick = "myGeeks()">
        Change overflowY
    </button>
     
    <!-- script to set style overflowY property -->
    <script>
        function myGeeks() {
            elem = document.querySelector('.content');
            elem.style.overflowY = 'inherit';
        }
    </script>
</body>
 
</html>                   
  • Salida: Antes de hacer clic en el botón:

 inherit-before 

Después de hacer clic en el botón: 

inherit-after

Navegadores compatibles: los navegadores compatibles con la propiedad overflowY del estilo DOM se enumeran a continuación:

  • Chrome 1 y superior
  • Borde 12 y superior
  • Internet Explorer 5 y superior
  • Firefox 3.5 y superior
  • Safari 3 y superior
  • Ópera 9.5 y superior

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *