Can one use Window.Onscroll method to include detection of scroll direction?
views:
1126answers:
1
+2
A:
If you record the scrollX and scrollY on page load and each time a scroll event occurs, then you can compare the previous values with the new values to know which direction you scrolled. Here's a proof of concept:
function scrollFunc(e) {
if ( typeof scrollFunc.x == 'undefined' ) {
scrollFunc.x=window.pageXOffset;
scrollFunc.y=window.pageYOffset;
}
var diffX=scrollFunc.x-window.pageXOffset;
var diffY=scrollFunc.y-window.pageYOffset;
if( diffX<0 ) {
// Scroll right
} else if( diffX>0 ) {
// Scroll left
} else if( diffY<0 ) {
// Scroll down
} else if( diffY>0 ) {
// Scroll up
} else {
// First scroll event
}
scrollFunc.x=window.pageXOffset;
scrollFunc.y=window.pageYOffset;
}
window.onscroll=scrollFunc
scompt.com
2009-08-03 17:05:54
+1: that's what I was going to say too. The only things I have to add is that there might be some sort of input device that lets you scroll freely (not constrained to just X or Y), so I'd break the one big IF into two. If it's the first scroll, you could also assume that it's going down or right. Also, you might need to check what happens with intrapage links (eg: href="#top").
nickf
2009-08-03 17:15:01
Works really well! Wonder how I might be able to calculate velocity of scroll?
David Okuniev
2009-08-03 23:38:40
I think you can get the timestamp of the events. Find the difference between two consecutive events and divide the diffs calculated above by the timestamp difference.
scompt.com
2009-08-04 00:30:50