javascript中各个高度与宽度区分
js获取文档的高度:Math.max(document.body.scrollHeight,document.documenElement.scrollHeight);
js获取浏览器可视区域的高度: Math.max(document.body.clientHeight, document.documentElement.clientHeight) // window.innerHeight;
js获取滚动条高度:document.documentElement.scrollTop || document.body.scrollTop;
js获取div到文档顶部的高度:document.getElementById("div").offsetTop;
获取div距离文档(body)顶部的高度 $(“#inner”).offset().top
获取div距离父元素顶部的距离 $(“#inner”).position().top
获取div距离窗口(window)顶部的距离 (“#inner”).offset().top - (“body”).scrollTop()
Jquery获取文档的高度:$(document).height();
Jquery获取浏览器可视区域的高度:$(window).height();
滚动条滚动高度:$(window).scrollTop();
当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。
宽度同高度!
下面是一个滚动加载更多的例子:
1 var page=1; 2 var finished=0; 3 var sover=0; //是否满屏 4 var subjectids = ${subjectids}; 5 var len = subjectids.length; 6 //如果屏幕未到整屏自动加载下一页补满 7 var setdefult=setInterval(function (){ 8 if(sover==1){ 9 clearInterval(setdefult); 10 }else if($(".dvd-box").height()< window.innerHeight || len<4) { 11 loadmore($(window),true); 12 } else 13 clearInterval(setdefult); 14 },500); 15 16 //加载更多 17 function loadmore(obj,flag){ 18 //flag,未满屏情况下。 19 if(finished==0 && sover==0){ 20 var scrollTop = $(obj).scrollTop(); 21 var scrollHeight = $(document).height(); //文档高度 22 var windowHeight = window.innerHeight;//可视区高度 23 24 if($(".loadmore").length==0) { 25 var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>' 26 $(".dvd-box").append(txt); 27 } 28 if (flag || scrollHeight - scrollTop - windowHeight <=500 ) { 29 //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作 30 //防止未加载完再次执行 31 finished=1; 32 $.ajax({ 33 type: 'GET', 34 url: "alb/index/"+subjectids[page], 35 success: function(data){ 36 if(data==""){ 37 sover = 1; 38 if (page == 1) { 39 $(".loadover").remove(); 40 } 41 }else{ 42 setTimeout(function(){ 43 /* $(".loadmore").remove(); */ 44 $('.dvd-box .loadmore').before(data); 45 LazyLoad(); 46 imgError(); 47 page+=1; 48 finished=0; 49 //最后一页 50 if(page==len){ 51 sover=1; 52 $(".loadmore").remove(); 53 } 54 },100); 55 } 56 }, 57 error: function(xhr, type){ 58 console.log('Ajax error!'); 59 } 60 }); 61 62 } 63 } 64 } 65 //页面滚动执行事件 66 $(window).scroll(function (){ 67 loadmore($(this)); 68 });