In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > overflow

overflow style property

Browser support:

Specifies or returns what to do with content outside the element's rendering area.

If an element's dimensions are set with any of the width and height properties, and the contents are larger than the specified area, with the overflow property you have control over how the overflowed content is handled.

If you want to hide the scrollbars of the entire document, use the overflow style property of the body or the html element. See Example 2 and 3 for details.

Syntax:

object.overflow;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: overflow

Possible values:

The type of this property is string.

One of the following values:

-moz-hidden-unscrollable

Content outside the element's box is not shown.

-moz-scrollbars-horizontal

Deprecated. Content is clipped when necessary, but scroll bars are always added.

-moz-scrollbars-none

Deprecated. Content is clipped and scroll bars are added only when necessary.

-moz-scrollbars-vertical

Deprecated. Content is clipped when necessary, but scroll bars are always added.

-webkit-marquee

The contents scroll inside the element's box.

auto

Content is clipped and scroll bars are added when necessary.

hidden

Content outside the element's box is not shown.

inherit

Takes the value of this property from the computed style of the parent element.

overlay

Content is clipped and scroll bars are added when necessary.

scroll

Content is clipped when necessary, but scroll bars are always added.

visible

Default. Content is not clipped.

Default: visible.

Example HTML code 1:

This example illustrates the use of the overflow property:

<head>
    <style>
        .example {
            overflow: auto;
            background-color: #F9F9F9;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="example">
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example uses the scroll property and the overflow style property of the body to hide the scrollbars of the document in all commonly used browsers:

<head>
    <style>
        body {
            overflow: hidden;
        }
    </style>
</head>
<body scroll="no">
    <div style="width:600px; height:1000px; background-color:#a0c0a0;">
        Resize the window, the scrollbars won't be visible.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example is the same as the previous one, but it uses the overflow style property of the html element to hide the scrollbars of the document in all browsers:

<head>
    <style>
        html {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div style="width:600px; height:1000px; background-color:#a0c0a0;">
        Resize the window, the scrollbars won't be visible.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to force the document's scrollbars to be always visible:

<head>
    <style>
        html {
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div style="width:600px; background-color:#a0c0a0;">
        Resize the window, the scrollbars will be always visible.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example shows how to change the value of the overflow property in JavaScript:

<head>
    <style>
        .example {
            overflow: scroll;
            background-color: #F9F9F9;
            width: 200px;
            height: 50px;
        }
    </style>

    <script type="text/javascript">
        function ChangeOverflow (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var overflowValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            div.style.overflow = overflowValue;
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        The overflow property determines what to do with content outside the element's rendering area.
    </div>

    <select onchange="ChangeOverflow (this);" size="4">
        <option />auto
        <option />hidden
        <option selected="selected" />scroll
        <option />visible
    </select>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 6:

This example shows how to change the state of the document's scrollbars at runtime:

<head>
    <script type="text/javascript">
        function ChangeScrollState (select) {
            document.documentElement.style.overflow = select.value;
        }
    </script>
</head>
<body>
    <div style="width:300px; height:100px; background-color:#a0c0a0;">
        Resize the window and modify the value of the scroll property with the list box below.
    </div>
    <select onchange="ChangeScrollState (this);" size="3">
        <option value="visible" selected="selected" />auto
        <option value="scroll" />show
        <option value="hidden" />hide
    </select>
</body>