2013-07-15 8 views
11

Ich habe ein Problem, wo Einstellung Überlauf-X: versteckt auf den HTML-und Body-Elemente verhindert die jquery Scroll-Ereignis von feuern.Überlauf-x: versteckt ist breaking jquery scroll Ereignis

CSS:

html, body { 
    overflow-x: hidden; 
} 

JS:

$(function(){ 
    $(window).on("scroll", function(e){ 
    console.log("scrolling");  
    }); 
}); 

http://jsfiddle.net/r7Fqq/6/

Probieren Sie es selbst: Kommentar out Überlauf-x: hidden und Pop-Konsole öffnen. Sie sollten sehen, dass "Scrollen" protokolliert wird, während Sie in der HTML-Box nach oben und unten scrollen. Kommentiere es zurück und das Scroll-Ereignis ist still.

Weiß jemand, warum das passiert? Ich bin mir bewusst, dass wenn Sie den Überlauf auf "Versteckt" setzen, das Scrollen deaktiviert wird, aber das sollte nur für die Achse geschehen, die Sie einstellen (nur in diesem Fall x). Vielen Dank im Voraus für jede Hilfe.

+2

Wie wäre es '$ ('body'). Auf ('blättern')'? – Chad

+2

Genauer gesagt, Ihr Fenster scrollt nicht, Ihr html/body ist. Wenn Sie die "Höhe: 100%;" entfernen, funktioniert Ihr Fenster-Scrolling gut. – Chad

+1

Wenn Sie overflow-x: hidden setzen, ist die Bildlaufleiste, die Sie sehen, für den Körper. Verkleinern Sie die Höhe, und Sie sehen zwei Bildlaufleisten, eine für den Körper und eine für das Fenster. Also ... was Torr3ent gesagt hat. http://jsfiddle.net/r7Fqq/7/ –

Antwort

1
$(function() { 
    $(window).bind('mousewheel', function(event, delta) { 
     console.log("mousewheel"); 
     return false; 
    }); 
}); 
12

Hatte das gleiche Problem. Lösung ist das Entfernen des Überlauf-X: versteckt aus dem HTML-Element und lassen Sie es nur auf das Körperelement und es sollte funktionieren.

+1

Ja. Arbeitete für mich. Keine Ahnung warum? Theoretisch sollte 'overflow-x' nur das horizontale Scrollen beeinflussen, nein? – jeteon

+0

Ansonsten lassen Sie es nur auf dem 'html'. – Alex78191

+0

Ich hatte Probleme mit dem Erkennen des Fensterscrollereignisses, wenn sowohl der 'html' als auch der' body' mit Überlaufscrollstilen formatiert wurden. –

0

Set body {height: 100%;} in css. Es würde dann funktionieren. Möglicherweise möchten Sie die Überlaufeigenschaft für ein div als für den gesamten Körper anwenden und dann den JS-Code entsprechend ändern. Wenn Sie eine Überlaufeigenschaft für body festlegen, wird die Scrollfunktion nicht mehr unterstützt. Eine andere Lösung kann die Verwendung des Jquery-Rad-Ereignisses sein, wie es in diesem Post- (https://stackoverflow.com/a/8378946/5348972) beschrieben ist.

0

Ich habe auch gefunden, dass dies der Fall ist. Wenn wir hinzugefügt:

body { 
    overflow-x: hidden; 
} 

alle window.addEventListener('scroll') Ereignisse gestoppt auszulösen. Ich glaube das liegt daran, dass das Scroll Event nicht auf document.body verschoben wurde. Wenn ich den EventListener zu document.body.addEventListener('scroll') ändere, fangen Sachen wieder an zu arbeiten. Das Interessante ist, dass mein event.bubbles boolean falsch ist. Von dem, was ich gelesen habe, sollte das Scroll-Ereignis zum Fenster sprudeln.

Lösung

Änderung

window.addEventListener('scroll',() => console.log('MEOW')) 

zu

document.body.addEventListener('scroll',() => console.log('MEOW'))