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

You are here: Reference > HTML > attributes > scroll (body)

scroll attribute (body)

Browser support:

Sets the state of the document window's scrollbars.

In Internet Explorer, the scrollbars of the body and the scrollbars of the document window are not identical. The scrollbars of the body are hidden by default because they are unnecessary in most cases.
In Firefox, Google Chrome, Safari and Opera, the scrollbars of the body and the scrollbars of the document window are the same.

If you want to hide the scrollbars of the entire document, a possible solution is to set the scroll attribute of the body to 'no' (Internet Explorer) and the overflow style property of the body to 'hidden' (Firefox, Google Chrome, Safari and Opera). The 'hidden' value does not cause problem in Internet Explorer since the scrollbars of the body are hidden by default.
The problem is when you want to force scrollbars to be always visible. In that case, the scroll attribute needs to be set to 'yes' and the overflow style property should be 'scroll', but the 'scroll' value causes that the scrollbars of the body become visible in IE. To avoid that, you can use conditional comments, but it is not a nice solution.

Fortunately, there is another possibility that solves the problem. The overflow style property of the html element affects the state of the document's scrollbars in all browser. If you want to hide the scrollbars, set it to 'hidden', if you want to force scrollbars to be always visible, set it to 'scroll'.

For further details, please see the examples below.

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

Possible values:

String that sets the state of the scrollbars.

One of the following values:

auto

Scrollbars are added only when necessary.

Scrollbars are not added.

yes

Default. Scrollbars are always added.

Default: yes.

Example HTML code 1:

This example uses the scroll attribute 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 2:

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 3:

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>