The scroll event
You may also want to keep track of when a user scrolls the window (or another element) in order to ensure something remains visible on the screen at all times. By using the scroll event, this is easy:
<title>OnScroll Example</title> </head>
<body onscroll="alert('Scrolling')">
<p>Try scrolling this window.</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html>
You can also assign the event handler to the window.onscroll property:
<title>OnScroll Example</title>
<script type="text/javascript">
window.onscroll = function () { alert("scrolling");
<p>Try scrolling this window.</p>
<p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </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:
<title>OnScroll Example</title>
<script type="text/javascript">
window.onscroll = function () {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\nscroll is at " + document.body.scrollLeft + "
horizontally and " + document.body.scrollTop + " vertically."; }
<p>Try scrolling this window.</p>
<p><textarea rows="15" cols="50" id="txt1"></textarea> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </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:
<title>OnScroll Example</title>
<script type="text/javascript">
window.onscroll = function () {
var oWatermark = document.getElementById("divWatermark"); oWatermark.style.top = document.body.scrollTop;
<p>Try scrolling this window.</p>
<div id="divWatermark" style="position: absolute; top: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark</div> <p>Line 1</p> <p>Line 2</p> <p>Line 3</p> <p>Line 4</p> <p>Line 5</p> <p>Line 6</p> <p>Line 7</p> <p>Line 8</p> <p>Line 9</p> <p>Line 10</p> <p>Line 11</p> <p>Line 12</p> </body> </html>
In this example, a <div/> specified with absolute positioning is the watermark. It starts out at the top of the page, and as the window scrolls, it must stay there. To handle this, a simple piece of code is added to the onscroll event handler that moves the watermark equal to the scrollTopproperty, which has the effect of always keeping it in the upper-right corner of the window.
Post a comment