Exemple détaillé 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. 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 :

Comment utiliser jquery pour déterminer la direction de défilement de la barre de défilement, exemple d'analyse de code

Script jQuery pour déterminer si la barre de défilement a défilé vers le bas de la page

jQuery pour déterminer si la case à cocher (case à cocher) est sélectionnée et si pour tout sélectionner et code d'implémentation de la sélection inverse

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!