Detaillierte Erläuterung der jQuery-Erkennung, ob die Webseite bis zum Ende des Browsers gescrollt wurde

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 Jquery verwendet, um festzustellen, ob der Benutzer bis zum Ende der Webseite navigiert ist. Ich hoffe, es hilft allen.

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 erhalten

$(window).width(); //Wird verwendet, um die Browser-Anzeige zu erhalten Bereich Die Breite von

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

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

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

$(document).scrollLeft(); // Bringen Sie die horizontale Bildlaufleiste nach links. Horizontaler Abstand

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

Mit dieser Schlussfolgerung wird es leicht umzusetzen sein. 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 nur die Höhe des Webseitendokuments oben auf den Abstand ändern Der Abstand zwischen einem Element und dem oberen Rand der Webseite reicht aus. 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("我已经到底部啦");
 }
 })

Hier müssen die Leser 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 ähnlich dem folgenden aufrufen.

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

Verwandte Empfehlungen:

CSS-Steuerelement-Div unten im Browser-Beispielcode behoben

Wie implementiert man ein festes und schwebendes DIV am unteren Rand des Browsers?_html/css_WEB-ITnose

Wie implementiert man ein festes und schwebendes DIV am unteren Rand des Browsers? des Browsers (nur mit CSS)? _html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Erkennung, ob die Webseite bis zum Ende des Browsers gescrollt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!