jQuery bestimmt, ob zum Ende der Webseite navigiert werden soll

Dieses Mal bringe ich Ihnen jQuery, um festzustellen, ob der Browser das Ende der Webseite erreicht hat. Welche Vorsichtsmaßnahmen gibt es für jQuery, um festzustellen, ob der Browser das Ende erreicht hat? Unten auf der Webseite sehen wir uns einen praktischen Fall an.

In einigen Anforderungen müssen neue Inhalte geladen werden, wenn der Benutzer zum unteren Rand des Browsers scrollt. Der Autor stellt hier vor, wie man mit Jquery ermittelt, ob der Benutzer bis zum Ende der Webseite navigiert hat.

Bevor der Autor die folgenden Wissenspunkte versteht, stellt er hier einige Konzepte vor.

$(window).height(); //Wird verwendet, um die Höhe des Browser-Anzeigebereichs zu ermitteln

$(window).width(); //Wird verwendet, um die Breite des Browser-Anzeigebereichs zu ermitteln

$(document.body).height(); //Ermitteln Sie die Höhe des Seitendokuments

$(document.body).width(); //Ermitteln Sie die Breite des Seitendokuments

$(document).scrollTop(); //Ermitteln Sie den vertikalen Abstand von der vertikalen Bildlaufleiste nach oben

$(document).scrollLeft(); //Ermitteln Sie den horizontalen Abstand von der horizontalen Bildlaufleiste nach links

Anhand der oben genannten Wissenspunkte können Sie Folgendes ermitteln: Höhe des Browser-Anzeigebereichs + Abstand von der vertikalen Bildlaufleiste nach oben

Mit dieser Schlussfolgerung lässt es sich leicht umsetzen. Der folgende Code wird implementiert, um festzustellen, ob der Benutzer bis zum Ende der Webseite navigiert ist.

 $(window).scroll(function(){
 var h=$(document.body).height();//网页文档的高度
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度
 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })

Wenn Sie feststellen müssen, ob der Benutzer zu einem bestimmten Element navigiert hat, müssen Sie lediglich die Höhe des Webseitendokuments oben an den Abstand zwischen einem bestimmten Element und dem oberen Rand der Webseite ändern. Zum Beispiel:

 $(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("我已经到底部啦");
 }
 })

Der Leser muss hier beachten, dass wh+c in der Beurteilungsbedingung die kleinste ganze Zahl erhält, die größer oder gleich dieser Zahl ist. Nach den Tests des Autors gibt es unter IE7, 8, 9 und 11 kein Problem.

Als nächstes kapselt der Autor den obigen Code in ein 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);

Nachdem die Leser die obige Plug-in-Datei vorgestellt haben, können sie sie über einen Code aufrufen, der dem folgenden ähnelt.

$("#p").inBottom(function(){
 alert("我被回调了");
},1);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonjQuery bestimmt, ob zum Ende der Webseite navigiert werden soll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!