码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中各个高度与宽度区分

时间:2016-11-07 12:15:24      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:code   区分   function   高度   页面   type   before   返回   script   

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

 

javascript中各个高度与宽度区分

标签:code   区分   function   高度   页面   type   before   返回   script   

原文地址:http://www.cnblogs.com/jing-blog/p/6038159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!