abs wrote:
How to detect that user started to scroll the page ? Separately vertical and
horizontal scroll. Is it possible ?
I used a setInterval timer that you can set to check at any interval (in
milliSeconds, 1000 mS = 1 second). I have this set to check for a
vertical or horizontal scroll every 1 second, it works on my IE6,
Netscape 7.2, Firefox 1.0. Not sure what it will do in other browsers.
If you know what browsers you need it to work on and have them
installed, you can test for their properties and add their measurements
to the functions.
Mike
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Detect Scrolling</title>
<style type="text/css">
body{
margin: 50px;
padding: 50px;
}
..wrapper{
width: 500px;
scrolling: auto;
border: 1px solid green;
position: absolute;
}
</style>
<script type="text/javascript">
var lastX, lastY, currentX, currentY;
function recordbeginvalues(){
if (document.getElementById&&!document.all){
lastY=window.pageYOffset;
lastX=window.pageXOffset;
}else{
lastY=document.documentElement.scrollTop;
lastX=document.documentElement.scrollLeft;
}
startPolling();
}
function startPolling(){setInterval("poll()",1000)}
function poll(){
if (document.getElementById&&!document.all){
currentY=window.pageYOffset;
currentX=window.pageXOffset;
}else{
currentY=document.documentElement.scrollTop;
currentX=document.documentElement.scrollLeft;
}
if (lastX!=currentX || lastY!=currentY){
alert('The Page Was Scrolled\n lastX '+lastX+' currentX
'+currentX+'\n lastY '+lastY+' currentY '+currentY);
lastX=currentX;
lastY=currentY;
}
}
</script>
</head>
<body bgcolor="#ffffff" onLoad="recordbeginvalues();">
<div class='wrapper'>
<p><b>This page will change background colors depending on how far down
you scroll.</b></p>
<p>Some bogus text to creat scrolling:</p>
<p>NOTE: PLACE LARGE AMT TEXT HERE TO FORCE THE SCROLLBARS TO APPEAR.
<br>
<br>
<br>
<br>
<p>NOTE: PLACE LARGE AMT TEXT HERE TO FORCE THE SCROLLBARS TO APPEAR.
<br>
<br>
<br>
<br>
<p>NOTE: PLACE LARGE AMT TEXT HERE TO FORCE THE SCROLLBARS TO APPEAR.
<br>
<br>
<br>
<br>
<p>NOTE: PLACE LARGE AMT TEXT HERE TO FORCE THE SCROLLBARS TO APPEAR.
<br>
<br>
<br>
<br>
<p>NOTE: PLACE LARGE AMT TEXT HERE TO FORCE THE SCROLLBARS TO APPEAR.
<br>
<br>
<br>
<br>
</p>
</div>
</body>
</html>
