Professional JavaScript For Web Developers

Chapter 9
 
 
 
 
 
 
 
 
 
 
You can also use this event in conjunction with several properties of the element, namely
scrollLeft, which tells you how far the window has scrolled horizontally, and scrollTop, which tells
you how far the window has scrolled vertically:
OnScroll Example
window.onscroll = function () {
var oTextbox = document.getElementById(“txt1”);
oTextbox.value += “\nscroll is at “ + document.body.scrollLeft + “
horizontally and “ + document.body.scrollTop + “ vertically.”;
}
Try scrolling this window.
 
 
 
 
 
 
 
 
 
 
 
 
In this example, a text box is used to track the scrollLeft and scrollTop properties so you can see
the changes accurately. This works on all major browsers and can be used to create cool effects like a
watermark that always appears at the top of the page:
OnScroll Example
290