Maison  >  Article  >  interface Web  >  Explication détaillée de jQuery déterminant si la page Web a défilé vers le bas du navigateur

Explication détaillée de jQuery déterminant si la page Web a défilé vers le bas du navigateur

小云云
小云云original
2018-01-20 10:44:191419parcourir

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. J'espère que cela aide 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 est suffisant. 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 :

div de contrôle CSS corrigé en bas de l'exemple de code du navigateur

Comment implémenter un DIV fixe et flottant en bas du navigateur ?_html/css_WEB-ITnose

Comment implémenter un DIV fixe et flottant en bas du navigateur du navigateur (en utilisant uniquement CSS) ? _html/css_WEB-ITnez

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!

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