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

You are here: Reference > HTML > attributes > scrolling (frame, iframe)

scrolling attribute (frame, iframe)

Browser support:

Sets 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 attribute.

JavaScript page for this attribute: scrolling. You can find other example(s) there.

Possible values:

String that sets 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>