2016-06-07 21 views
0

Arbeits Wenn meine mobile Website bauen, habe ich diese Eigenschaften, um meinen Körper fügen überschüssige Leerzeichen zu beseitigen:JQuery scrollTop nicht mit Überlauf

html,body 
{ 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

jedoch meine jQuery scrollTop Funktionen in Bezug auf Parallaxe und die navbar, tat arbeite jetzt nicht. Diese Funktionen funktionieren nicht auf Mobilgeräten.

$n = ".navbar"; 
$(window).scroll(function(){ 
    if($(window).scrollTop() > 300){ 
     $($n).css("background-color", "rgba(255,255,255,.2)"); 
    } else { 
     $($n).css("background-color", "transparent"); 
    } 
}); 

Ich habe versucht, den Überlauf aus dem Körper zu entfernen, und es ausschließlich auf HTML und umgekehrt zu halten, was mein Problem nicht beheben, aber die Leerzeichen zurückgibt. Ich habe online nachgesehen, aber ich kann nichts über dieses Problem finden. Wenn Sie die Website anzeigen möchten, lautet die URL http://studysesh.us. Denken Sie daran, es fängt gerade erst an, momentan ist die Homepage die einzige Seite. Danke.

+0

mhm .... Wenn ich mein Fenster auf eine mobile Auflösung verkleinern, wird nichts mehr in der Konsole angezeigt. Ich gehe davon aus, dass dieses '-webkit-overflow-scrolling: touch;' die Ursache ist. (Testen in Vivaldi mit Google Dev Tools) – TCHdvlp

+0

Ja. Ich habe eine Medienabfrage hinzugefügt, um den Überlauf zu entfernen, es sei denn, das Fenster ist ungefähr mobil. Ich bin mir nicht sicher, warum es nicht das Scrollen aufhebt. Was ich bemerke, ist, dass das Scrollen protokolliert, wenn Sie den Browser hüpfen (dh entweder oben oder unten) –

+0

Eine andere Sache seltsam. Wenn Sie nach unten scrollen und dann das Fenster auf mobile Auflösung verkleinern, ist es in Ordnung. Wenn Sie es jetzt ein wenig dehnen, wird das Fenster wieder nach oben kommen. Wenn Sie es erneut verkleinern, wird es auf die letzte Position zurückgehen. Es ist so, als ob etwas zurückgesetzt wurde oder wie du zwei verschiedene Dokumente hast ... komisch – TCHdvlp

Antwort

0

ich denke, es könnte durch die

overflow-y: scroll; 
overflow-x: hidden; 

versuchen, sie zu ändern, indem

es
overflow: auto; 
+0

Nein, habe es ausprobiert. Die Schriftrolle funktioniert immer noch nicht, nichts meldet sich in der Konsole an. –

2

Figured auf dem body die height Eigenschaft durch Entfernen aus verursacht werden, was wörtlich entspricht der der Einstellung height bis auto.

body { 
    height: auto; 
    max-width: 100%; 
} 

Wenn Sie einen Wert an die height des body explizit festgelegt, auf einen beliebigen Bereich Scrollen über sie auslösen würde tatsächlich scroll Ereignis innerhalb des body selbst und nicht die window. Meiner Meinung nach war dies die Ursache für das Problem, dass das scroll Ereignis nicht ausgelöst wurde.

Inzwischen ist overflow-y: scroll; überflüssig und unnötig in Ihrem Fall, da es eine hässliche Scroll-Leiste auf den body zwingt, wenn die Breite des Ansichtsfensters deutlich reduziert.

Verwandte Themen