Detailed explanation of jQuery determining whether the web page has scrolled to the bottom of the browser

In some requirements, new content needs to be loaded when the user scrolls to the bottom of the browser. The author here introduces how to use Jquery to determine whether the user has browsed to the bottom of the web page. Hope it helps everyone.

Before understanding the following knowledge points, the author will introduce a few concepts here.

$(window).height(); //Used to get the height of the browser display area

$(window).width(); //Used to get the browser display area The width of

$(document.body).height(); //Get the height of the page document

$(document.body).width(); //Get the width of the page document

$(document).scrollTop(); //Get the vertical distance from the vertical scroll bar to the top

$(document).scrollLeft(); //Get the horizontal scroll bar to the left Horizontal distance

Through the above knowledge points, you can know: the height of the browser display area + the distance from the top of the vertical scroll bar <= the height of the web page.

With this conclusion, it will be easy to implement. The following code is implemented to determine whether the user has browsed to the bottom of the web page.

 $(window).scroll(function(){
 var h=$(document.body).height();//网页文档的高度
 var c = $(document).scrollTop();//滚动条距离网页顶部的高度
 var wh = $(window).height(); //页面可视化区域高度

 if (Math.ceil(wh+c)>=h){
  alert("我已经到底部啦");
 }
 })

If you need to determine whether the user has browsed to a certain element, then you only need to change the height of the web page document above to the distance between a certain element and the top of the web page. That's it. For example:

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

Readers need to note that in the judgment condition, wh+c is the smallest integer that is greater than or equal to this number. After the author's testing, there is no problem on IE7, 8, 9, and 11.

Next, the author encapsulates the above code into a 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);

Then after readers introduce the above plug-in file, they can call it through code similar to the following.

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

Related recommendations:

css control div fixed at the bottom of the browser example code

How to implement a fixed and floating DIV at the bottom of the browser?_html/css_WEB-ITnose

##How to implement a fixed and floating DIV at the bottom of the browser (using only css)? _html/css_WEB-ITnose

The above is the detailed content of Detailed explanation of jQuery determining whether the web page has scrolled to the bottom of the browser. For more information, please follow other related articles on the PHP Chinese website!