Enterprise Software

Find out to scroll window content

One of the lesser-used windowing capabilities of JavaScript is controlled window scrolling. Here are some ways to implement the scrolling functionality.

By Brent Lee Metcalfe

One of the lesser-used windowing capabilities of JavaScript is controlled window scrolling, although this may change with the advent of scrollable layered content. This tip shows you ways to implement scrolling functionality.

The code is straightforward. Let's begin with the function for scrolling down.

var y = 0;
var when = null;
var ps = parent.scrollee;

function scrollMe() {
  if (document.all && y < ps.document.body.scrollHeight || y < ps.document.height) {
    ps.scroll(0,y);
    y = y + 4;
    when = setTimeout('scrollMe()',1);
  }
}

Function scrollMe() first checks to see whether the browser supports document.all (a property unique to IE) and then checks whether variable y is less than the scrollHeight, the IE property that contains the pixel height of the scrollable .html page. Or, if the browser doesn't support document.all (as Communicator does not), the function checks whether y is less than the height, the unique Communicator property corresponding to the IE scrollHeight property. If either is so, frame scrollee scrolls down four pixels. Variable when effectively instructs the function to repeat the four-pixel scroll every one millisecond. The result is a smooth downward scroll.

Several scrolling examples that I've seen on the Web simply set an arbitrarily large number in the same place where I use document.body.scrollHeight or document.height. This is bad. In such cases, when the scroll reaches the bottom of the page, if users don't move their cursors, the y coordinate continues to increment. So, when users place their cursors on the up arrow, the page doesn't move right away because the function is incrementing from some distant point that the down arrow took them to.

Since scrollMe() is called when the onMouseOver event handler fires, a function (stopMe()) is called to stop the scroll when onMouseOut fires:

function stopMe() {
  clearTimeout(when);
}

The same function also stops upward scrolling.

The function to scroll up is similar to the function to scroll down:

function rollMe() {
  if (y >= 0) {
    ps.scroll(0,y)
    y = y - 4;
    when = setTimeout('rollMe()',1);
  }
}

First rollMe() tests whether y is greater than or equal to 0. If so, frame scrollee scrolls up four pixels. As with scrollMe(), when repeats the four-pixel scroll every one millisecond.

This function takes you to the top:

function topMe() {
  ps.scroll(0,0);
  y = 0;
}

If you don't reset y to 0 in topMe(), when you use down or up (whichever one you place your cursor over next) the page returns to the y position it was last in before you placed your cursor on top.

This function takes you to the bottom:

function bopMe() {
  if (document.all) {
    ps.scroll(0,ps.document.body.scrollHeight);
    y = ps.document.body.scrollHeight;
    } else {
      ps.scroll(0,ps.document.height);
      y = ps.document.height;
      }
}

Window scrolling is probably most useful in a layered or CSSP setting. However, keep in mind that you could use similar techniques to scroll the contents of a separate window or control the destination of a scroll.

Brent Lee Metcalfe is a Web architecture consultant.

Editor's Picks