Dans certaines exigences, le nouveau contenu doit être chargé lorsque l'utilisateur fait défiler vers le bas du navigateur. L'auteur explique ici comment utiliser Jquery pour déterminer si l'utilisateur a navigué jusqu'au bas de la page Web. Cet article partage principalement avec vous jQuery pour déterminer si la page Web a défilé jusqu'en bas du navigateur. J'espère que cela pourra aider tout le monde.
Avant de comprendre les points de connaissances suivants, l'auteur présentera ici quelques concepts.
$(window).height(); //Utilisé pour obtenir la hauteur de la zone d'affichage du navigateur
$(window).width(); //Utilisé pour obtenir l'affichage du navigateur. Area La largeur de
$(document.body).height(); //Obtenir la hauteur du document de page
$(document.body).width(); la largeur de la page du document
$(document).scrollTop(); //Obtient la distance verticale entre la barre de défilement verticale et le haut
$(document).scrollLeft(); //Obtenir la barre de défilement horizontale vers la gauche Distance horizontale
Grâce aux points de connaissances ci-dessus, vous pouvez connaître : la hauteur de la zone d'affichage du navigateur + la distance de la barre de défilement verticale vers le haut
Avec cette conclusion, ce sera facile à mettre en œuvre. Le code suivant est implémenté pour déterminer si l'utilisateur a navigué jusqu'au bas de la page Web.
$(window).scroll(function(){ var h=$(document.body).height();//网页文档的高度 var c = $(document).scrollTop();//滚动条距离网页顶部的高度 var wh = $(window).height(); //页面可视化区域高度 if (Math.ceil(wh+c)>=h){ alert("我已经到底部啦"); } })
Si vous devez déterminer si l'utilisateur a accédé à un certain élément, il vous suffit de modifier la hauteur du document de la page Web ci-dessus en distance. entre un élément et le haut de la page Web La distance est suffisante. Par exemple :
$(window).scroll(function(){ var h=$("#p").offset().top;//id为p的元素距离网页顶部的距离 var c = $(document).scrollTop();//滚动条距离网页顶部的高度 var wh = $(window).height(); //页面可视化区域高度 if (Math.ceil(wh+c)>=h){ alert("我已经到底部啦"); } })
Ici, les lecteurs doivent noter que dans la condition de jugement, wh+c obtient le plus petit entier supérieur ou égal à ce nombre. Après les tests de l'auteur, il n'y a aucun problème sur IE7, 8, 9 et 11.
Ensuite, l'auteur encapsule le code ci-dessus dans un plug-in.
(function ($) { //backcall是回调函数,count表示回调函数被执行的次数,count只有在元素通过滚动条滑出的时候才起作用 $.fn.inBottom = function (backcall){ //判断当前元素是否在目前屏幕可视化区域之内 if(this.offset().top >= $(window).height()){ this.inScroll(backcall,count); }else{ this.inWindow(backcall); } }; //直接加载回调函数 $.fn.inWindow = function (backcall){ backcall(); }; //滚动监听滑动条,元素滚动到屏幕底部的时候,加载回调函数 $.fn.inScroll = function (backcall,count) { var $this=this; $(window).scroll(function(){ //获得这个元素到文档顶部的距离 var awayDocTop=$this.offset().top; //获得滚动条的top var sTop=$(document).scrollTop(); //获得可视化窗口的高度 var wh=$(window).height(); if(Math.ceil(wh+sTop)>=awayDocTop){ if(count>0){ backcall(); count--; } }; }); }; })(jQuery);
Ensuite, une fois que les lecteurs ont présenté le fichier de plug-in ci-dessus, ils peuvent l'appeler via un code similaire au suivant.
$("#p").inBottom(function(){ alert("我被回调了"); },1);
Recommandations associées :
Script jQuery pour déterminer si la barre de défilement a défilé vers le bas de la page
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!