Kann man Fenster.Onscroll Methode, um die Erkennung der Laufrichtung?

Kann man Fenster.Onscroll Methode, um die Erkennung der Laufrichtung?

InformationsquelleAutor der Frage David Okuniev | 2009-08-03

  1. 21

    Wenn Sie erfassen die scrollX und scrollY auf die Seite laden und jedes mal, wenn ein scroll-Ereignis tritt auf, Sie können dann vergleichen Sie die vorherigen Werte mit den neuen Werten zu wissen, welche Richtung Sie gescrollt werden. Hier ist ein 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

    InformationsquelleAutor der Antwort scompt.com

  2. 2

    Mit jquery, können Sie sich auch registrieren Sie einen benutzerdefinierten scroll-Ereignis, das versorgt den Blättern ändern als argument an den Ereignishandler:

    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]);
});

    Dann statt scrollbinden custom_scroll:

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

    InformationsquelleAutor der Antwort Greg

  3. 0

    Hatte ich Schwierigkeiten damit, diese Arbeit im ie8 (obwohl es ist kompatibel zum ie9, FF und Chrome) - alle Schriftrollen zu sein scheinen erkannt als horizontale.

    Hier ist eine modifizierte Skript demodas funktioniert auch im ie8 und kann für ein paar mehr Browsern.

    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​

    InformationsquelleAutor der Antwort Deborah

Schreibe einen Kommentar