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;

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