上拉加载的思路
1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据
2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用
Javascript:alert(document.body.clientWidth); //网页可见区域宽(body)alert(document.body.clientHeight); //网页可见区域高(body)alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域alert(document.body.scrollTop); //网页被卷去的Top(滚动条)alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)alert(window.screenTop); //浏览器距离Topalert(window.screenLeft); //浏览器距离Leftalert(window.screen.height); //屏幕分辨率的高alert(window.screen.width); //屏幕分辨率的宽alert(window.screen.availHeight); //屏幕可用工作区的高alert(window.screen.availWidth); //屏幕可用工作区的宽 Jqueryalert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height()); //浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width()); //浏览器当前窗口文档对象宽度alert($(document.body).width()); //浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
//获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; } //获取当前可视范围的高度 function getClientHeight() { var clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); } return clientHeight; } //获取文档完整的高度 function getScrollHeight() { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); }
var upDown = function (opt) { opt = opt || {}; var up = opt.up || function () { }; window.onscroll = function () {if (getScrollTop() + getClientHeight() == getScrollHeight()) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 if(is_scroll === true){ //当这个为true的时候调用up方法 ....is_scroll没看懂往下看 up(); }} } };
新闻热点
疑难解答
图片精选