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

You are here: Reference > JavaScript > client-side > event handling > events > onscroll

onscroll event | scroll event

Browser support:

Occurs when the contents of an element have been scrolled.

This event is only fired on elements that have a scrollbar. Use the overflow style property to create scrollbars for an element.

How to register:

In HTML:

In JavaScript:

object.onscroll = handler;

object.addEventListener ("scroll", handler, useCapture);

9

object.attachEvent ("onscroll", handler);

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

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles

Cancelable

Event object

UIEvent

9

Event

Actions that invoke the onscroll event:

Scrolling the contents of an element with the scrollbar.
Rolling the mouse wheel over an element.
Pressing a cursor left, up, right, down or the HOME, END, PAGE UP, PAGE DOWN or SPACE key when an element has the focus.
Scrolling the contents of the element by JavaScript (scrollTop and scrollLeft properties, scrollTo, scrollBy, scrollByLines, scrollByPages and doScroll methods).

The order of events related to the onscroll event:

Rolling the mouse wheel over an element.

Internet Explorer, Opera, Google Chrome and Safari	Firefox
onmousewheel onscroll	DOMMouseScroll onscroll

Any other action that invokes the onscroll event.

onscroll

Example HTML code 1:

This example displays the number of pixels by which the contents of an object are scrolled:

<head>
    <script type="text/javascript">
        function OnScrollDiv (div) {
            var info = document.getElementById ("info");
            info.innerHTML = "Horizontal: " + div.scrollLeft
                            + "px<br/>Vertical: " + div.scrollTop + "px";
        }
    </script>
</head>
<body>
    <div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    Current scroll amounts:
    <div id="info"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop properties and the onscroll event:

<head>
    <script type="text/javascript">
        function DisplayCurrentScroll () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[4].innerHTML = div.scrollLeft;
            info.rows[2].cells[4].innerHTML = div.scrollTop;
        }

        function DisplayInfo () {
            var div = document.getElementById ("scrollDiv");
            var info = document.getElementById ("info");
            info.rows[1].cells[1].innerHTML = div.scrollWidth;
            info.rows[2].cells[1].innerHTML = div.scrollHeight;
            info.rows[1].cells[2].innerHTML = div.clientWidth;
            info.rows[2].cells[2].innerHTML = div.clientHeight;
            info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth;
            info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight;

            DisplayCurrentScroll ();
        }

        function OnScrollDiv () {
            DisplayCurrentScroll ();
        }
    </script>
</head>
<body onload="DisplayInfo ()">
    <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv ()">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    <table id="info" border="1px">
        <thead>
            <tr>
                <th></th>
                <th>Total size</th>
                <th>Client size</th>
                <th>Max scroll position</th>
                <th>Current scroll position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>Horizontal</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td><b>Vertical</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

window

HTML elements:

address, blockquote, body, caption, center, dd, dir, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, html, li, listing, marquee, menu, object, ol, p, plaintext, pre, select, tbody, textarea, tfoot, thead, ul, xmp

scrollWidth
scrollHeight
scrollLeft
scrollTop
onmousewheel

External links:

onscroll (MSDN)
onscroll (Mozilla Developer Center)
onscroll (Safari Reference Library)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

Frank Conijn

Onscroll often does not validate, but should

The HTML validators do not regard onscroll as valid HTML under doctypes before HTML5. However, the reason behind it -- the events are not specified in the validators' specifications in question -- is invalid itself. Onscroll *is* part of the official Javascript specification, and of exactly the same type of inline HTML as e.g. the much older onload, which validates without a problem.