To pause the scroll while a user mouses over the scrolling box, we added two events to the scrolling DIVs, onMouseOver and onMouseOut. These events are defined for both firstPage and secondPage DIVs, as either one of them may be exposed at the canvas container layer. The onMouseOver event occurs when the mouse is placed over the scroll box. The onMouseOut event occurs when the mouse is removed from the scroll box area. The event handler for the onMouseOver event is the scrollPages() function which has been discussed on the previous page. It starts the pages going, just as the invocation of the program would in the first place:

function scrollPages() {
    Gtimer = setInterval("moveUp()", interval)
}

The Gtimer variable stores a pointer to the setInterval() command, which invokes the moveUp() function every interval ms. The event handler of the onMouseOut event is the stopScrolling() function which clears the Gtimer pointer and thus cancels the call to the moveUp() function, causing the pages to halt:

function stopScrolling() {
  clearInterval(Gtimer);
}