Ich möchte etwas auf meiner Website einrichten, wo, wenn Sie innerhalb von 15% des unteren Randes der Seite ein Element flyouts von der Seite scrollen ... Ich bin mir nicht sicher, wie ich hier anfangen soll ... sollte Ich füge einen Listener für eine Bildlauffunktion oder etwas hinzu?
Ich versuche, den Effekt am Ende dieser Seite nachzubilden: Ссылка
update
Ich habe diesen Code ....
%Vor% Die console.log() -Werte ändern sich nicht, wenn ich zum Ende der Seite blättern. Die Seite ist doppelt so lang wie mein Ansichtsfenster.
Ich weiß, dass dies ein altes Thema ist, aber der obige Code, der das Häkchen erhielt, löste auch den $(window).scroll() -Ereignis-Listener zu oft aus.
Ich denke, Twitter hatte dieses Problem an einem Punkt. John Resig hat darüber hier gebloggt: Ссылка
%Vor%Der Unterschied zwischen den beiden Code-Blöcken ist also, wann und wie der Timer aufgerufen wird. In diesem Code wird der Timer absichtlich aufgerufen. Alle 30 Millisekunden wird überprüft, ob die Seite gescrollt wurde. Wenn es gescrollt wurde, prüft es, ob wir den Punkt auf der Seite passiert haben, auf dem wir den versteckten Inhalt anzeigen möchten. Wenn das dann wahr ist, wird die tatsächliche Funktion aufgerufen, um den Inhalt anzuzeigen. (In meinem Fall habe ich gerade einen console.log-Ausdruck hier drin.
Dies scheint mir besser zu sein als die andere Lösung, weil die letzte Funktion nur einmal pro Iteration aufgerufen wird. Bei der anderen Lösung wurde die letzte Funktion zwischen 4 und 5 mal aufgerufen. Das muss Ressourcen sparen. Aber vielleicht vermisse ich etwas.
So etwas sollte funktionieren:
%Vor% document.body.scrollTop funktioniert möglicherweise nicht in allen Browsern gleich gut (es hängt tatsächlich vom Browser und vom Doctyp ab); also müssen wir das in einer Funktion abstrahieren.
Außerdem müssen wir nur einmal flyout . So können wir den Event-Handler nach dem Aussteigen losbinden.
Und wir möchten nicht, dass der Flyout -Effekt das Scrollen verlangsamt, also werden wir unsere Flyout-Funktion außerhalb der Event-Schleife ausführen (mit setTimeout ()).
Hier ist der letzte Code:
%Vor% Am Ende wird also nur getScrollTop() > document.body.scrollHeight * 0.85 bei jedem Scroll-Ereignis ausgeführt, was akzeptabel ist.
Der Effekt flyout wird nur einmal ausgeführt und nachdem das Ereignis zurückgegeben wurde, wirkt sich dies nicht auf das Scrollen aus.
schlechte Idee, das Scroll-Ereignis zu erfassen, am besten einen Timer verwenden und alle paar Millisekunden überprüfen Sie die Bildlaufposition und wenn in dem Bereich, den Sie benötigen, dann führen Sie den notwendigen Code für das, was Sie brauchen
Update: In den letzten paar Jahren ist es das beste Verfahren, das Event zu abonnieren und ein throttle zu verwenden, um eine übermäßige Verarbeitung zu vermeiden Ссылка
Tags und Links javascript jquery