HTML - DOM Style Object overflowY Property

Quiz

HTML DOM Style Object overflowY property decides on what to do with the top and bottom edges of content if it does not fit inside the element box.

Syntax

Set the overflowY property:

object.style.overflowY= "visible | hidden | scroll | auto | initial | inherit";

Get the overflowY property:

object.style.overflowY;

Property Values

Value	Description
visible	It is the default value in which content outside the element box is not clipped and is displayed outside of element box.
hidden	It clips the content outside the element box and only the content inside the element box is displayed and rest is hidden.
scroll	It clips the content to fit the element box adds a scroll bar for the content outside the element box.
auto	It clips the content and scroll bars are added only when required and when content overflowYs.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the overflow-y property of an element.

Examples of HTML DOM Style Object 'overflowY' Property

The following examples illustrates overflowY properties to hide and add scroll to div element.

Hide the Vertical overflowing Content

The following example hides the overflowYing content out of element box using hidden property value.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object overflowY Property
    </title>
    <style>
        #overflowY {
            border: 2px solid yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <button onclick="funtwo()">Hide</button>
    <br><br><br>
    <div id="overflowY">
        <p>
            CSS is the acronym for "Cascading Style Sheet".
        </p>
        <p>
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML.
        </p>
        <p>
            CSS helps the web developers to control
            the layout and other visual aspects of
            the web pages.
        </p>
        <p>
            CSS plays a crucial role in modern web
            development by providing the tools necessary
            to create visually appealing, accessible, and
            responsive websites.
        </p>
    </div>
    <script>
        function funtwo() {
            document.getElementById("overflowY")
                .style.overflowY = "hidden";
        }
    </script>
</body>
</html>

Adding Scroll Bar to div Element

The following example adds a scroll bar to div element using scroll property value.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object overflowY Property
    </title>
    <style>
        #overflowY {
            border: 2px solid yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Add Scrollbar</button>
    <br><br><br>
    <div id="overflowY">
        <p>
            CSS is the acronym for "Cascading Style Sheet".
        </p>
        <p>
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML.
        </p>
        <p>
            CSS helps the web developers to control
            the layout and other visual aspects of
            the web pages.
        </p>
        <p>
            CSS plays a crucial role in modern web
            development by providing the tools necessary
            to create visually appealing, accessible, and
            responsive websites.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("overflowY")
                .style.overflowY = "scroll";
        }
    </script>
</body>
</html>

Set overflow Property to auto

The following property sets the overflowY property to auto which adds a scroll bar to the right side of div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object overflowY Property
    </title>
    <style>
        #overflowY {
            border: 2px solid yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Auto</button>
    <br><br><br>
    <div id="overflowY">
        <p>
            CSS is the acronym for "Cascading Style Sheet".
        </p>
        <p>
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML.
        </p>
        <p>
            CSS helps the web developers to control
            the layout and other visual aspects of
            the web pages.
        </p>
        <p>
            CSS plays a crucial role in modern web
            development by providing the tools necessary
            to create visually appealing, accessible, and
            responsive websites.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("overflowY")
                .style.overflowY = "auto";
        }
    </script>
</body>
</html>

Supported Browsers

Property
overflowY	Yes 1	Yes 12	Yes 3.5	Yes 3	Yes 9.5

html_dom_style_object_reference.htm

Print Page