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

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!