jQuery détermine s'il faut naviguer vers le bas de la page Web

Cette fois, je vous apporterai jQuery pour déterminer si le navigateur a atteint le bas de la page Web. Quelles sont les précautions pour que jQuery détermine si le navigateur a atteint le bas de la page. en bas de la page Web. Ce qui suit est un cas pratique. Jetons un coup d'œil.

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.

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 la largeur de la zone d'affichage du navigateur

$(document.body).height(); //Obtenir la hauteur du document de la page

$(document.body).width(); //Obtenir 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(); //Obtient la distance horizontale depuis la barre de défilement horizontale vers la gauche

Grâce aux points de connaissances ci-dessus, vous pouvez connaître : la hauteur de la zone d'affichage du navigateur + la distance entre la barre de défilement verticale et le haut

Avec cette conclusion, c’est 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 par la distance entre un certain élément et le haut de la page Web. 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("我已经到底部啦");
 }
 })

Les lecteurs doivent noter ici que dans la condition de jugement, wh+c est 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);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!