tags:

views:

1126

answers:

1

Can one use Window.Onscroll method to include detection of scroll direction?

+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
+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
Works really well! Wonder how I might be able to calculate velocity of scroll?
David Okuniev
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