Explication détaillée de l'événement de défilement jQuery pour implémenter l'exemple de pagination de la barre de défilement de surveillance

Cet article présente principalement l'événement jQuery scroll pour implémenter un exemple simple de surveillance de la pagination de la barre de défilement, à l'aide du chargement ajax, et présente également (document) .height La différence entre () et $(window).height(), les amis dans le besoin peuvent se référer à l'

l'événement de défilement est applicable à l'objet fenêtre, mais il peut également faire défiler l'iframe frame et CSS Éléments dont l'attribut overflow est défini pour défiler.

Le code est le suivant :

$(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); });
        }
    });
});

Notez la différence entre (window).height() et (document).height()

jQuery (window) .height() représente la taille de la zone actuellement visible, tandis que jQuery(document).height() représente la hauteur de l'ensemble du document, qui peut être utilisée en fonction de la situation spécifique

Remarque. que lorsque la taille de la fenêtre du navigateur change (par exemple, après avoir maximisé ou agrandi la fenêtre), jQuery(window).height() change en conséquence, mais jQuery(document).height() reste inchangé.

Le code est le suivant :

$(document).scrollTop() Obtient la distance de défilement vertical, c'est-à-dire la distance depuis le haut de la fenêtre où vous vous trouvez actuellement faire défiler vers le haut de toute la page
$( document).scrollLeft() C'est la distance pour obtenir la barre de défilement horizontale

Pour atteindre le haut, il vous suffit d'obtenir lorsque scrollTop()= =0, c'est le haut

Pour obtenir le bas, récupérez simplement scrollTop()>=$(document).height()-$(window).height() Vous pouvez savoir que vous avez fait défiler vers le bas

Le code est le suivant :

$ (document).height() //Obtient la hauteur de la page entière
$(window).height () //Obtient la hauteur de la partie actuelle de la page que votre navigateur peut voir. Cette taille est La taille de la fenêtre du navigateur changera lorsque vous la redimensionnerez, ce qui est différent du document. basé sur l'anglais

Faites simplement une expérience et vous saurez

Le code est le suivant :

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

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!