JQ判断滚动条是否到达页面底部，流加载

2019独角兽企业重金招聘Python工程师标准>>>

1.获取页面高度：var h=$(document.body).height();//网页文档的高度

2.获取滚动条距离浏览器窗口顶部高度：var c = $(document).scrollTop();//滚动条距离网页顶部的高度

3.获取浏览器显示区域的高度：var wh = $(window).height(); //页面可视化区域高度

（1）浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。

$(window).scroll(function(){

var h=$(document.body).height();//网页文档的高度

var c = $(document).scrollTop();//滚动条距离网页顶部的高度

var wh = $(window).height(); //页面可视化区域高度

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

（2）获取滚动条距离页面底部的距离。

判断滚动条距离页面底部的距离<=滚动条高度+50或者别的。

（3）滚动条距离页面顶部的距离<=页面高度+滚动条高度+50/别的

 

（4）借用别人封装的代码

https://my.oschina.net/u/3443377/blog/1555750

(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);

调用

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

转载于:https://my.oschina.net/u/3040505/blog/1563664