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