Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Funktion jQuery.scroll()

Detaillierte Erläuterung der Funktion jQuery.scroll()

巴扎黑
Freigeben: 2017-06-29 09:36:05
Original
2756 Leute haben es durchsucht

Die Funktion

scroll() wird verwendet, um eine Handlerfunktion an das Scroll-Ereignis jedes passenden Elements zu binden. Diese Funktion kann auch zum Auslösen von Scroll-Ereignissen verwendet werden. Darüber hinaus können Sie auch einige zusätzliche Daten an die Funktion Ereignishandler übergeben.

Das Scroll-Ereignis wird ausgelöst, wenn sich die Position der Scroll-Leiste des Elements ändert. Dieses Ereignis gilt im Allgemeinen nur für Fensterobjekte oder andere scrollbare Elemente (im Allgemeinen werden Bildlaufleisten angezeigt).

Darüber hinaus können Sie mehrere Event-Handler binden, indem Sie diese Funktion mehrmals für dasselbe Element aufrufen. Wenn das Scroll-Ereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus.

Um ein über scroll() gebundenes Ereignis zu löschen , verwenden Sie die Funktion unbind().

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

jQueryObject.scroll( [ [ data ,] handler ] )

Wenn mindestens ein Parameter angegeben ist, bedeutet dies, dass die Handlerfunktion des Scroll-Ereignisses gebunden wird; Wenn kein Parameter angegeben ist, bedeutet dies, dass das Scroll-Ereignis ausgelöst wird.

Parameter

Parameterbeschreibung

Daten Optional/jede Art von Daten, die über event.data an die Ereignisverarbeitungsfunktion übergeben werden müssen, wenn ein Ereignis ausgelöst wird.

Handler optional/Ereignisbehandlungsfunktion, angegeben durch Funktionstyp.

jQuery 1.4.3 neue Unterstützung: scroll() unterstützt Datenparameter.

Dies im Parameterhandler zeigt auf das aktuelle DOM-Element. scroll() übergibt außerdem einen Parameter an den Handler: das Event-Objekt, das das aktuelle Ereignis darstellt.

Wenn der Rückgabewert des Funktionshandlers falsch ist, bedeutet dies, dass das Standardereignisverhalten des Elements verhindert und verhindert wird, dass das Ereignis im DOM-Baum sprudelt. Wenn beispielsweise die Handlerfunktion des Klickereignisses des Links false zurückgibt, kann das Standard-URL-Sprungverhalten des Links verhindert werden.

Der Scroll-Ereignishandler des Formulars gibt „false“ zurück, wodurch das standardmäßige Formularübermittlungsverhalten des Formulars verhindert werden kann.

Rückgabewert

scroll()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Bitte beachten Sie den folgenden HTML-Beispielcode:

<div id="msg" style="height: 3000px;" ></div>
现在,我们为window对象的scroll事件绑定处理函数(可以绑定多个,触发时按照绑定顺序依次执行):
$(window).scroll( function(event){
    $("#msg").append( $(this).scrollTop() + &#39;<br>&#39; );
} );
// 触发window对象的scroll事件
// $(window).scroll( );
Nach dem Login kopieren

Wir können auch einige zusätzliche Daten an die Event-Handler-Funktion übergeben. Darüber hinaus können wir über den von jQuery für die Ereignisverarbeitungsfunktion übergebenen Parameter Ereignisobjekt relevante Informationen über das aktuelle Ereignis erhalten (z. B. Ereignistyp, DOM-Element, das das Ereignis ausgelöst hat, zusätzliche Daten usw.):

var maxScrollTop = 1000;
// 向下滚动到据顶部超过1000px时,回到顶部
$(window).scroll( maxScrollTop, function(event){
    var $me = $(this);
    if( $me.scrollTop() > event.data ){
        $me.scrollTop( 0 );
    }
} );
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktion jQuery.scroll(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage