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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > scroll (body)

scroll property (body)

Browser support:

Sets or retrieves 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 property 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 property 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.

Although the value of the scroll property can be modified in JavaScript, the modification has no any visual effect. If you want to change the state of the document's scrollbars at runtime, see Example 4.

Syntax:

object.scroll;

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

This property is read/write.

HTML page for this property: scroll

Possible values:

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

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