↑
Main Page

conjunction

</body>

</html>

You can also use this event in conjunction with several properties of the

<body/>

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:

<html>

<head>

<title>OnScroll Example</title>

window.onscroll = function () {

var oTextbox = document.getElementById(“txt1”);

oTextbox.value += “\nscroll is at “ + document.body.scrollLeft + “

horizontally and “ + document.body.scrollTop + “ vertically.”;

}

</script>

</head>

<body>

<p>Try scrolling this window.</p>

</body>

</html>

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:

<html>

<head>

<title>OnScroll Example</title>

290

Chapter 9

12_579088 ch09.qxd 3/28/05 11:39 AM Page 290