So ermitteln Sie mithilfe von JQuery, ob die Bildlaufleiste den unteren Rand erreicht

Mit der kontinuierlichen Weiterentwicklung von Webanwendungen ist es immer häufiger geworden, Funktionen wie „Unendliches Scrollen“ oder „Mehr laden“ zu implementieren. Um diese Funktionen zu erreichen, müssen wir jedoch die Position der Bildlaufleiste überwachen und sicherstellen, dass automatisch mehr Daten geladen werden, wenn die Bildlaufleiste den unteren Bildschirmrand erreicht. Dies muss mithilfe einer JavaScript-Bibliothek erreicht werden.

In diesem Artikel erfahren Sie, wie Sie mit jQuery feststellen, ob die Bildlaufleiste den unteren Rand der Seite erreicht hat, und weitere Daten laden.

Vorhandene Methoden

Bevor wir uns mit der jQuery-Methode zum Implementieren von Bildlaufleisten nach unten befassen, werfen wir einen Blick auf einige gängige Methoden:

1. Native JavaScript-Methoden verwenden: Wir können native JavaScript-Methoden verwenden, um die Bildlaufleiste zu erhalten Anschließend wird die Position mit der Seitenhöhe verglichen, um festzustellen, ob die Bildlaufleiste den unteren Rand der Seite erreicht hat. Dieser Ansatz erfordert jedoch das Schreiben von viel Code und ist fehleranfällig.
2. JQuery-Plugin verwenden: Viele jQuery-Plugins implementieren bereits die Funktion, mit der Bildlaufleiste den unteren Rand zu erreichen. Diese Plugins können Ihren JavaScript-Code prägnanter machen und die Fehlerwahrscheinlichkeit verringern. Diese Plugins können jedoch die Ladezeit Ihrer Anwendung verlängern und sind nicht unbedingt erforderlich.
3. Verwenden Sie die integrierten Methoden von jQuery: Für kleine Projekte ist die Verwendung der integrierten Methoden von jQuery möglicherweise die beste Option. jQuery bietet für diese ähnlichen Situationen eine große Anzahl von Hilfsmethoden, die es Entwicklern erleichtern, diese Funktionen zu implementieren.

Bestimmen Sie, ob die Bildlaufleiste den unteren Rand erreicht.

Zuerst müssen wir die Höhe jedes Fensterlaufs überwachen und sie mit der Seitenhöhe vergleichen. Beachten Sie, dass wir die Seitenhöhe beim Scrollen des Fensters nicht wiederholt berechnen müssen, da sich die Seitenhöhe nicht mit der Position der Bildlaufleiste ändert. Daher können wir initialisieren, wenn das Dokument fertig ist (d. h. die Gesamthöhe des Dokuments wurde berechnet und in der Variablen docHeight gespeichert). docHeight中）进行初始化。

$(document).ready(function() {
    var docHeight = $(document).height(); //文档总高度
    // ... 剩余代码
});

然后，在窗口滚动时，我们需要将当前滚动位置与文档高度进行比较。如果滚动距离等于文档高度（减去窗口高度），则表示滚动条已经到达页面底部。

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == docHeight) {
        // 滚动条到达底部，执行相应操作
    }
});

在这个例子中，$(window).scrollTop()表示当前窗口的滚动距离，$(window).height()表示窗口的高度，docHeight

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == docHeight) {
        // 滚动条到达底部，加载更多数据
        $.ajax({
            url: 'next-page.html',
            type: 'get',
            dataType: 'html',
            success: function(response) {
                //将获取到的数据添加到页面
                $('body').append(response);
                //更新文档高度
                docHeight = $(document).height();
            },
            error: function(xhr) {
                //处理错误
            }
        });
    }
});

rrreee

rrreee

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie mithilfe von JQuery, ob die Bildlaufleiste den unteren Rand erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!