Ausführliche Erläuterung des jQuery-Scroll-Ereignisses zur Implementierung eines Beispiels für die Überwachung der Bildlaufleisten-Paging-Funktion

In diesem Artikel wird hauptsächlich das jQuery scroll-Ereignis vorgestellt, um ein einfaches Beispiel für die Überwachung des Scrollbar-Pagings mithilfe von Ajax-Laden zu implementieren, und außerdem wird (Dokument) vorgestellt. .height () und $(window).height(), Freunde in Not können sich auf das folgende

Scroll-Ereignis beziehen, das auf Fensterobjekte anwendbar ist, aber auch Iframe-Frames scrollen kann CSS Elemente, deren Overflow-Attribut auf Scrollen eingestellt ist.

Der Code lautet wie folgt:

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

Beachten Sie den Unterschied zwischen (window).height() und (document).height()

jQuery (window) .height() stellt die Größe des aktuell sichtbaren Bereichs dar, während jQuery(document).height() die Höhe des gesamten Dokuments darstellt, die je nach Situation verwendet werden kann

Hinweis Wenn sich die Größe des Browserfensters ändert (z. B. nach dem Maximieren oder Vergrößern des Fensters), ändert sich jQuery(window).height() entsprechend, jQuery(document).height() bleibt jedoch unverändert.

Der Code lautet wie folgt:

$(document).scrollTop() Ruft die vertikale Scrolldistanz ab, also den Abstand vom oberen Rand des Fensters, an dem Sie sich gerade befinden Scrollen zum Anfang der gesamten Seite
$( document).scrollLeft() Dies ist der Abstand, um die horizontale Bildlaufleiste zu erhalten

Um den Anfang zu erreichen, müssen Sie nur abrufen, wenn scrollTop()= =0, es ist oben

Um nach unten zu gelangen, holen Sie sich einfach scrollTop()>=$(document).height()-$(window).height() Sie können wissen, dass Sie gescrollt haben nach unten

Der Code lautet wie folgt:

$ (document).height() //Erhält die Höhe der gesamten Seite
$(window).height () // Ruft die Höhe des aktuellen Teils der Seite ab, den Ihr Browser sehen kann. Die Größe des Browserfensters ändert sich, wenn Sie hineinzoomen, was sich vom Dokument unterscheidet basierend auf Englisch

Machen Sie einfach ein Experiment und Sie werden es wissen

Der Code lautet wie folgt:

$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
08cb7016fe7b326c73a161ca03203e9154bdf357c58b8a65c66d7c19c8e4d114db766c79d167312d3ec1c0707197bd62

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des jQuery-Scroll-Ereignisses zur Implementierung eines Beispiels für die Überwachung der Bildlaufleisten-Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!