Maison >interface Web >js tutoriel >Événement de défilement jQuery pour implémenter un exemple de pagination de la barre de défilement de surveillance

Événement de défilement jQuery pour implémenter un exemple de pagination de la barre de défilement de surveillance

高洛峰
高洛峰original
2017-01-11 09:44:511343parcourir

L'événement scroll s'applique aux objets window, mais peut également faire défiler les éléments iframe avec la propriété CSS overflow définie sur scroll.

$(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 . jQuery(document).height() représente la hauteur de l'ensemble du document et peut être utilisé en fonction de la situation spécifique

Notez 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é.

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

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

Pour obtenir le bas, il vous suffit d'obtenir scrollTop(). >=$(document). height()-$(window).height() Vous pouvez savoir que vous avez défilé vers le bas

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

Faites simplement une expérience et vous saurez

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

Plus d'événements de défilement jQuery Pour des articles connexes sur la mise en œuvre d'exemples de pagination de barre de défilement de surveillance, veuillez faire attention au site Web PHP chinois !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn