HTML - DOM Style Object overflowX Property

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

Syntax

Set the overflowX property:

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

Get the overflowX property:

object.style.overflowX;

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 overflows.
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-x property of an element.

Examples of HTML DOM Style Object 'overflowX' Property

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

Hide the Overflowing Content

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

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object overflowX Property
    </title>
    <style>
        #overflowX {
            white-space: nowrap;
            border: 2px solid yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Hide</button>
    <br><br><br>
    <div id="overflowX">
        <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("overflowX")
                .style.overflowX = "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 overflowX Property
    </title>
    <style>
        #overflowX {
            white-space: nowrap;
            border: 2px solid yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Add Scrollbar</button>
    <br><br><br>
    <div id="overflowX">
        <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("overflowX")
                .style.overflowX = "scroll";
        }
    </script>
</body>
</html>

Set overflowX Property to auto

The following property sets the overflowX property to auto which adds a scroll bar to the bottom of div element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object overflowX Property
    </title>
    <style>
        #overflowX {
            white-space: nowrap;
            border: 2px solid yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Auto</button>
    <br><br><br>
    <div id="overflowX">
        <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("overflowX")
                .style.overflowX = "auto";
        }
    </script>
</body>
</html>

Supported Browsers

Property
overflowX	Yes 1	Yes 12	Yes 3.5	Yes 3	Yes 9.5

html_dom.htm

Print Page