HTML | DOM Style overflowY Property

The Style overflowY property in HTML DOM is used to specify the behavior of the content when it overflows an element’s top and bottom edges. The content may be hidden, shown or a scrollbar according to the value.

Syntax:

  • It returns the overflowY property.
    object.style.overflowY
  • It is used to set the overflowY property.
    object.style.overflowY = "scroll|hidden|visible|auto|initial|inherit"

Property Values:



  • scroll: The content is clipped to fit the element box and a scrollbar is provided help scroll the extra overflowed content. The scrollbar here is added even if the content is not clipped.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    Before click on the button:

    After click on the button:
    scroll-after

  • hidden: The content is clipped and hidden to fit the element. No scrollbars are provided when using this value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    Before click on the button:
    hidden-before
    After click on the button:
    hidden-after

  • visible: The content is not clipped and may overflow out to the top or bottom of the containing element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    Before click on the button:
    visible-before
    After click on the button:
    visible-after

  • auto: The behavior of auto depends on the content and scrollbars are added only when the content overflows.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    Before click on the button:
    auto-before
    After click on the button:
    auto-after

  • initial: It sets the style overflowY property to its default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    Before click on the button:
    initial-before
    After click on the button:
    initial-after

  • inherit: This inherits the property from its parent.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    Before click on the button:
    inherit-before
    After click on the button:
    inherit-after

Supported Browsers: The browser supported by DOM style overflowY property are listed below:

  • Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.