Можно ли использовать метод Window.Onscroll, чтобы включить обнаружение направления прокрутки?

Ответ 1

Если вы записываете scrollX и scrollY на загрузку страницы, и каждый раз, когда происходит событие прокрутки, вы можете сравнить предыдущие значения с новыми значениями, чтобы узнать, в каком направлении вы прокручиваете. Здесь доказательство понятия:

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

Ответ 2

С помощью jquery вы также можете зарегистрировать собственное событие прокрутки, которое поставляет изменение прокрутки в качестве аргумента обработчику событий:

var previous_scroll = $(window).scrollTop();

$(window).on('scroll', function() {
    var scroll = $(window).scrollTop(),
        scroll_change = scroll - previous_scroll;
    previous_scroll = scroll;
    $(window).trigger('custom_scroll', [scroll_change]);
});

Затем вместо scroll привязайтесь к custom_scroll:

$(window).on('custom_scroll', function pos(e, scroll_change) {
    console.log(scroll_change);
});

Ответ 3

Мне не удалось выполнить эту работу в ie8 (хотя она совместима с ie9, FF и Chrome) - все свитки кажутся обнаруженными как горизонтальные.

Ниже приведена измененная демонстрация script которая также работает в ie8 и может охватывать несколько браузеров.

function scrollFunc(e) {

   function getMethod() {
        var x = 0, y = 0;
        if ( typeof( window.pageYOffset ) == 'number' ) {
          x = window.pageXOffset;
          y = window.pageYOffset;
        } 

        else if( document.body && (document.body.scrollLeft || document.body.scrollTop ) ) {
          x = document.body.scrollLeft;
          y = document.body.scrollTop;
        } 

        else if( document.documentElement && (document.documentElement.scrollLeft ||     document.documentElement.scrollTop ) ) {
          x = document.documentElement.scrollLeft;
          y = document.documentElement.scrollTop;
        }

         return [x, y];
    }

    var xy = getMethod();            
    var xMethod = xy[0];           
    var yMethod = xy[1];

    if ( typeof scrollFunc.x == 'undefined' ) {
       scrollFunc.x = xMethod;
       scrollFunc.y = yMethod;
    }

    var diffX = scrollFunc.x - xMethod;
    var diffY = scrollFunc.y - yMethod;


    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 = xMethod;
    scrollFunc.y = yMethod;
}

window.onscroll=scrollFunc​