1.获取页面高度:var h=$(document.body).height();//网页文档的高度浏览器
2.获取滚动条距离浏览器窗口顶部高度:var c = $(document).scrollTop();//滚动条距离网页顶部的高度函数
3.获取浏览器显示区域的高度:var wh = $(window).height(); //页面可视化区域高度this
(1)浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。.net
$(window).scroll(function(){code
var h=$(document.body).height();//网页文档的高度blog
var c = $(document).scrollTop();//滚动条距离网页顶部的高度文档
var wh = $(window).height(); //页面可视化区域高度回调函数
if (Math.ceil(wh+c)>=h){ alert("我已经到底部啦"); } })io
(2)获取滚动条距离页面底部的距离。function
判断滚动条距离页面底部的距离<=滚动条高度+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);