原生ajax写的上拉加载实例

2019-09-14 06:44:38于海丽

上拉加载的思路

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);      //浏览器距离Top
alert(window.screenLeft);      //浏览器距离Left
alert(window.screen.height);    //屏幕分辨率的高
alert(window.screen.width);     //屏幕分辨率的宽
alert(window.screen.availHeight);   //屏幕可用工作区的高
alert(window.screen.availWidth);   //屏幕可用工作区的宽
 
 
 
Jquery
alert($(window).height());       //浏览器当前窗口可视区域高度
alert($(document).height());      //浏览器当前窗口文档的高度
alert($(document.body).height());    //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(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();
 }}
  }
 };