JQuery/JS: Ermitteln Sie Scrollen des Benutzers ohne Fensterüberlauf, um zu

Question

zu scrollen. Ich arbeite an einer Übergangswebsite, und während ich den Scrollversuch des Benutzers als Initiator für den Übergang verwenden möchte, möchte ich nicht, dass dies der Fall ist eine Fensterlaufleiste.

Gerade jetzt, ich bin Erkennung einfach, dass scrollt der Benutzer (ich meine Fenstergröße gemacht habe 1px größer, dass der Bildschirm des Benutzers für eine Scrollbar, obwohl dies ist, was ich versuche zu vermeiden) mit jQuerys

.scroll(function) 

Methode und verwenden, dass meine Seite zu übergehen, aber ich möchte den Benutzer Scroll-Versuch erkennen, ohne dass meine Seite über~~POS=TRUNC durch ein Pixel zu bilden, und somit zeigt die Scrollbar

Wie kann das getan werden?

Messy Patch Möglichkeit, die ich kenne:

Positionierung der Fenster innerhalb einer äußeren Umhüllung und die Bildlaufleiste in den Überlauf der Hülle versteckt. Dies ist ein Patch-Up-Job und keine Lösung. Dies führt dazu, dass der Seiteninhalt nicht zentriert ist, da nicht alle Browser dieselbe Breite für ihre Bildlaufleisten verwenden.

Answer 1

Werfen Sie einen Blick auf diese question. Ich habe es als Referenz verwendet, um dies fiddle zu machen.

Works only in Firefox:

$('html').on ('DOMMouseScroll', function (e) { 
    var delta = e.originalEvent.detail; 

    if (delta < 0) { 
     $('p').text ('You scrolled up'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled down'); 
    } 

}); 

Works in Chrome, IE, Opera and Safari:

$('html').on ('mousewheel', function (e) { 
    var delta = e.originalEvent.wheelDelta; 

    if (delta < 0) { 
     $('p').text ('You scrolled down'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled up'); 
    } 
}); 

Du müsstest es auf ein Element zu binden, die Ihre gesamte Browser-Bildschirm erstreckt.

Answer 2

Die Antwort von TreeTree kann in eine Funktion vereinfacht werden, die alle Browser unterstützt. Kombinieren Sie die Ereignisse mousewheel und DOMMouseScroll seit jQuery supports one or more event parameter(s). Allerdings zeigten meine Tests auf() nicht im aktuellen Firefox. Verwenden Sie stattdessen bind(). Sie können auch die var Delta Deklaration kombinieren, um alle Browser zu unterstützen:

$('html').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); 

    if (delta < 0) { 
     console.log('You scrolled down'); 
    } else if (delta > 0) { 
     console.log('You scrolled up'); 
    } 
}); 

Answer 3

Die moderne Lösung beruht auf der wheel Ereignis (IE9 +)

$('selector').on('wheel', function(event) { 
    var delta = { 
    x: event.originalEvent.deltaX, 
    y: event.originalEvent.deltaY 
    }; 

    if (delta.x != 0 || delta.y != 0) { 
    //user scrolled 
    } 
});