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.
up
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content