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

overflowY style property

Browser support:
3.510
Specifies or returns what to do with content that exceeds the element's height.
If the height of an element is set and the contents of the element are higher than the specified area, then the overflowY property provides you control over how the overflowed content is handled.
Note: The overflowY property is supported in Firefox from version 3.5, and in Opera from version 10.
In earlier versions of Firefox and Opera, use the overflow property instead.

Syntax:

object.overflowY;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: overflow-y

Possible values:

The type of this property is string.
 One of the following values: 
-webkit-marquee
The contents scroll inside the element's box.
auto
Vertical content is clipped and scroll bars are added when necessary.
hidden
Vertical content outside the element's box is not shown.
overlay
Content is clipped and scroll bars are added when necessary.
scroll
Vertical content is clipped when necessary, but scroll bars are always added.
visible
Default. Vertical content is not clipped.
Default: visible.

Example HTML code 1:

This example illustrates the use of the overflow-y property:
<head>
    <style>
        .example {
            overflow-y: scroll;
            background-color: #F9F9F9;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="example">
        The overflow-y property determines what to do with the 
        vertical content outside the element's rendering area.
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the overflowY 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");

            if ('overflowY' in div.style) {
                div.style.overflowY = overflowValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        The overflowY property determines what to do with the vertical 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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content