15.5 Auto-Scrolling the Page
NN 4, IE 4
15.5.1 Problem
You want the entire browser page to
automatically scroll vertically for the user.
15.5.2 Solution
With their Version 4 releases, Internet Explorer and Netscape
Navigator empowered their window objects with a
scrollBy( ) method. By invoking it repeatedly
through a setInterval( ) call, you can scroll the
browser window with no user interaction. The following function and
setInterval( ) call do the trick:
function scrollWindow( ) {
window.scrollBy(0, 1);
}
function initScroll( ) {
setInterval("scrollWindow( )", 100);
}
The initScroll( ) function should be invoked by the
onload event handler of the
body element.
15.5.3 Discussion
Determining the optimum scroll speed is not easy, and may even
dissuade you from employing this application except perhaps in a
kiosk environment. Scrolling speed is governed by two variables: the
number of pixels of the increment (the second parameter of
scrollBy( )) and how often the
scrollWindow( ) function is invoked (the interval
time specified in the setInterval(
) method call). If the pixel increment is
too large, the page jumps in big steps that are difficult for the eye
to track for any length of time. The smaller the increment, the
better, as shown by the one-pixel jumps in the solution.
Frequency is specified by the nominal number of milliseconds between
calls to the scrollWindow(
) function. Too large a number makes the
page scroll painfully slowly for moderate reading speeds. Too small a
number may lead to more comfortable reading in an ideal environment,
but it points out a potential problem beyond your control: repetitive
execution of the setInterval( )
method's function does not fire in absolutely
uniform intervals. The smaller the interval, the more you see the
results in bursts of smooth scrolling followed by brief stuttering.
To check on the progress of the autoscroll through the page, you can
read the instantaneous scroll amount (in pixels); however, the syntax
varies not only between Netscape and IE, but also between
standards-compatible mode and quirks mode in IE 6. For Netscape 6 or
later, get the read-only properties window.scrollX
and window.scrollY. For older IE versions and IE 6
running in backward-compatible mode, use
document.body.scrollLeft and
document.body.scrollTop. In the CSS-compatibility
mode of IE 6, use
document.body.parentElement.scrollLeft and
document.body.parentElement.scrollTop. The latter
pair reads the scroll values for the entire html
element filling the window.
15.5.4 See Also
Recipe 13.12 for an alternative way to scroll content (in a
positioned div element) without scrolling the
window.
| 
No comments:
Post a Comment