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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > scrolling (frame, iframe)

scrolling property (frame, iframe)

Browser support:

Sets or retrieves whether a frame has scrollbars.

If you want to change one of the element's scrollbar state, use the overflow style property, or if you want to change the scrollbar state of the entire page (Internet Explorer), use the scroll property.

Syntax:

object.scrolling;

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

This property is read/write.

HTML page for this property: scrolling

Possible values:

String that sets or retrieves the state of scrollbars.

One of the following values:

auto

Default. Scrollbars are added only when necessary.

Scrollbars are not added.

yes

Scrollbars are always added.
This value behaves differently in browsers:

In Internet Explorer before version 8, only the vertical scrollbar is always added, the horizontal scrollbar is added only when necessary.
In Google Chrome, Safari and in Internet Explorer from version 8, both scrollbars are added only when necessary (same as 'auto').
In Firefox and Opera, both scrollbars are always added.

Default: auto.

Example HTML code 1:

This example illustrates the use of the scrolling attribute. Note that the value of 'yes' behaves differently in browsers (see above). If you want that scrollbars will be always added to a frame, use the overflow style property. The next example demonstrates it.

Code

frameScroll1.htm

frameNoScroll1.htm

<head>
    <style>
        iframe {
            width:200px; 
            height:150px;
        }
    </style>
</head>
<body>
    <iframe src="frameScroll1.htm" scrolling="yes"></iframe>
    <iframe src="frameNoScroll1.htm" scrolling="no"></iframe>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h2>This frame always has scrollbars.</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <nobr><h2>This frame never has scrollbars.</h2></nobr>
    <h2>This frame never has scrollbars.</h2>
    <nobr><h2>This frame never has scrollbars.</h2></nobr>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to add scrollbars to a frame in all commonly used browsers. It uses the overflow style property of the html element to implement it.

Code

frameScroll2.htm

frameNoScroll2.htm

<head>
    <style>
        iframe {
            width:200px; 
            height:150px;
        }
    </style>
</head>
<body>
    <iframe src="frameScroll2.htm"></iframe>
    <iframe src="frameNoScroll2.htm"></iframe>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        html {
            overflow: scroll;
        }
    </style>
</head>
<body style="background-color:#fbd8a4;">
    <h2>This frame always has scrollbars.</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        html {
            overflow: hidden;
        }
    </style>
</head>
<body style="background-color:#fbd8a4;">
    <nobr><h2>This frame never has scrollbars.</h2></nobr>
    <h2>This frame never has scrollbars.</h2>
    <nobr><h2>This frame never has scrollbars.</h2></nobr>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the scrolling property. Although the value of the scrolling property can be modified in JavaScript, it has no any visual effect in Internet Explorer, Google Chrome and Safari. See the next example, it shows a cross-browser solution.

Code

frameOverflow.htm

<head>
    <style>
        iframe {
            width:200px; 
            height:150px;
        }
    </style>
    <script type="text/javascript">
        function ChangeScrollState (select) {            
            var iframe = document.getElementById ("myIFrame");
            iframe.scrolling = select.value;
        }
    </script>
</head>
<body>
    <iframe id="myIFrame" src="frameOverflow.htm" /></iframe>

    <select onchange="ChangeScrollState (this);" size="3">
        <option value="auto" selected="selected" />auto
        <option value="no" />no
        <option value="yes" />yes
    </select>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <nobr><h1>Contents of the frame</h1></nobr>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to change the state of an iframe's scrollbars at runtime.

Code

frameOverflow.htm

<head>
    <style>
        iframe {
            width:200px; 
            height:150px;
        }
    </style>
    <script type="text/javascript">
        function ChangeScrollState (select) {            
            var iframe = document.getElementById ("myIFrame");
            var frameDoc = iframe.contentWindow.document;
            frameDoc.documentElement.style.overflow = select.value;
        }
    </script>
</head>
<body>
    <iframe id="myIFrame" src="frameOverflow.htm" /></iframe>

    <select onchange="ChangeScrollState (this);" size="3">
        <option value="auto" selected="selected" />auto
        <option value="scroll" />show
        <option value="hidden" />hide
    </select>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <nobr><h1>Contents of the frame</h1></nobr>
</body>
</html>