javascript中各个高度与宽度区分

Posted 2020-08-17

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