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

You are here: Reference > JavaScript > client-side > event handling > methods > doScroll (body, div, html, span, textarea)

doScroll method (body, div, html, span, textarea)

Browser support:

Simulates a mouse click on the specified scrollbar component of the current element.

To simulate a click on a scrollbar component of the document, use the doScroll method on the html element instead of the body element. In Firefox, the scrollByLines and scrollByPages methods can be used on the document for similar functionality.

If you need a cross-browser solution to scroll the contents of an element, use the scrollLeft and scrollTop properties. See the example below for details.

Note: when no scrollbars are displayed, the doScroll method has no effect.

If you want to simulate a mouse click on an element, use the click method.

Syntax:

object.doScroll ([scrollType]);

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

Parameters:

scrollType

Optional. String that specifies the scrollbar component on which the click should be simulated. This parameter is case-insensitive. Default is 'scrollbarPageDown'.

One of the following values:

scrollbarDown

Simulate a click on the down scrollbar arrow.

scrollbarHThumb

Simulate a click on the horizontal scrollbar thumb.

scrollbarLeft

Simulate a click on the left scrollbar arrow.

scrollbarPageDown

Simulate a click on the page-down region of the vertical scrollbar.

scrollbarPageLeft

Simulate a click on the page-left region of the horizontal scrollbar.

scrollbarPageRight

Simulate a click on the page-right region of the horizontal scrollbar.

scrollbarPageUp

Simulate a click on the page-up region of the vertical scrollbar.

scrollbarRight

Simulate a click on the right scrollbar arrow.

scrollbarUp

Simulate a click on the up scrollbar arrow.

scrollbarVThumb

Simulate a click on the vertical scrollbar thumb.

down

Identical to scrollbarDown.

left

Identical to scrollbarLeft.

pageDown

Identical to scrollbarPageDown.

pageLeft

Identical to scrollbarPageLeft.

pageRight

Identical to scrollbarPageRight.

pageUp

Identical to scrollbarPageUp.

right

Identical to scrollbarRight.

Identical to scrollbarUp.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the doScroll method:

<head>
    <script type="text/javascript">
        var scrollTimer = null;

        function ScrollUp () {
            var scrollArea = document.getElementById ("myScrollArea");
            if (scrollArea.doScroll) {  // Internet Explorer
                scrollArea.doScroll ("scrollbarDown");
            }
            else {
                scrollArea.scrollTop += 10;
            }
        }

        function ScrollDown () {
            var scrollArea = document.getElementById ("myScrollArea");
            if (scrollArea.doScroll) {  // Internet Explorer
                scrollArea.doScroll ("scrollbarUp");
            }
            else {
                scrollArea.scrollTop -= 10;
            }
        }

        function StartScroll (up) {
            StopScroll ();
            if (up) {
                scrollTimer = setInterval (ScrollDown, 100);
            }
            else {
                scrollTimer = setInterval (ScrollUp, 100);
            }
        }

        function StopScroll () {
            if (scrollTimer !== null) {
                clearTimeout (scrollTimer);
                scrollTimer = null;
            }
        }
    </script>
</head>
<body>
    Just move your mouse over the buttons!
    <br /><br />
    <div id="myScrollArea" style="width:300px; height:100px; overflow:auto; background-color:#e0d0a0;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae sapien. 
        Aenean nec lacus. Integer consectetur iaculis arcu. 
        Curabitur commodo, lacus in posuere ultrices, libero dui rhoncus nisl, interdum rhoncus mi lacus at est. 
        Aenean sem sapien, ullamcorper vel, porta in, iaculis id, ipsum. Morbi risus. 
        Sed tempor semper leo. Aenean molestie. Nullam neque odio, egestas in, vehicula a, molestie eu, eros. 
        Proin non est et felis imperdiet consequat. 
        Cras metus leo, porttitor eget, dapibus at, molestie ac, turpis. 
        In cursus, purus vitae varius pharetra, quam quam cursus dolor, eget malesuada tellus dui et mauris. 
        Praesent nulla. Donec pharetra.
    </div>
    <br /><br />
    <button onmouseover="StartScroll (false)" onmouseout="StopScroll ()">Scroll down</button>
    <button onmouseover="StartScroll (true)" onmouseout="StopScroll ()">Scroll up</button>
</body>