Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2017-01-11 09:44:51
original
1299 Les gens l'ont consulté

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); });
        }
    });
});
Copier après la connexion

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() 这是获取水平滚动条的距离
Copier après la connexion

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是不一样的  根据英文应该也能理解吧
Copier après la connexion

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标记 滚动时方便查看-->
Copier après la connexion

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal