Comment utiliser jquery pour déterminer si la barre de défilement atteint le bas

Avec le développement continu des applications Web, il est devenu très courant d'implémenter des fonctions telles que le « défilement infini » ou le « charger plus ». Cependant, afin de mettre en œuvre ces fonctions, nous devons surveiller la position de la barre de défilement et nous assurer que lorsque la barre de défilement atteint le bas de l'écran, davantage de données sont automatiquement chargées. Cela doit être réalisé à l'aide d'une bibliothèque JavaScript.

Dans cet article, nous explorerons comment utiliser jQuery pour déterminer si la barre de défilement a atteint le bas de la page et charger plus de données.

Méthodes existantes

Avant de plonger dans la méthode jQuery d'implémentation des barres de défilement vers le bas, examinons quelques méthodes courantes :

1. Utiliser des méthodes JavaScript natives : nous pouvons utiliser des méthodes JavaScript natives pour obtenir la barre de défilement. La position est ensuite comparée à la hauteur de la page pour déterminer si la barre de défilement a atteint le bas de la page. Cependant, cette approche nécessite d’écrire beaucoup de code et est sujette aux erreurs.
2. Utiliser le plugin jQuery : De nombreux plugins jQuery implémentent déjà la fonction de barre de défilement atteignant le bas. Ces plugins peuvent rendre votre code JavaScript plus concis et réduire les risques d'erreurs. Cependant, ces plugins peuvent augmenter le temps de chargement de votre application et ne sont pas forcément obligatoires.
3. Utilisez les méthodes intégrées de jQuery : pour les projets à petite échelle, l'utilisation des méthodes intégrées de jQuery peut être la meilleure option. jQuery fournit un grand nombre de méthodes d'assistance pour ces situations similaires, permettant aux développeurs d'implémenter plus facilement ces fonctions.

Déterminez si la barre de défilement atteint le bas

Tout d'abord, nous devons surveiller la hauteur de défilement de chaque fenêtre et la comparer avec la hauteur de la page. Notez que nous n'avons pas besoin de calculer à plusieurs reprises la hauteur de la page à mesure que la fenêtre défile, car la hauteur de la page ne change pas avec la position de la barre de défilement. Par conséquent, nous pouvons initialiser lorsque le document est prêt (c'est-à-dire que la hauteur totale du document a été calculée et stockée dans la variable docHeight). 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) {
                //处理错误
            }
        });
    }
});

Ensuite, à mesure que la fenêtre défile, nous devons comparer la position de défilement actuelle avec la hauteur du document. Si la distance de défilement est égale à la hauteur du document (moins la hauteur de la fenêtre), la barre de défilement a atteint le bas de la page.

rrreee

Dans cet exemple, $(window).scrollTop() représente la distance de défilement de la fenêtre actuelle, $(window).height() représente la hauteur de la fenêtre, docHeight représente la hauteur totale du document.

Charger plus de données

Lorsque la barre de défilement atteint le bas de la page, nous pouvons effectuer certaines opérations, telles que : Charger plus de données. Dans cet exemple, nous pouvons utiliser des requêtes Ajax pour obtenir les données puis les ajouter à la page.

rrreee

Dans cet exemple, nous avons utilisé la méthode jQuery Ajax pour obtenir les données de la page suivante. Une fois la demande réussie, nous ajoutons les données de réponse au bas de la page et mettons à jour la hauteur du document.

Résumé🎜🎜Cet article explique comment utiliser jQuery pour déterminer si la barre de défilement a atteint le bas de la page et charger plus de données lorsqu'elle atteint le bas. L'utilisation des techniques ci-dessus peut améliorer votre application et offrir une meilleure expérience utilisateur. Cependant, il est important de noter que cette approche doit être utilisée avec prudence lorsque l’on traite de grandes quantités de données afin d’éviter des effets néfastes sur l’expérience utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!