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()。

宽度同高度!

 

下面是一个滚动加载更多的例子：

var page=1;  
        var finished=0;  
        var sover=0;  //是否满屏
        var subjectids = ${subjectids};  
        var len = subjectids.length;
        //如果屏幕未到整屏自动加载下一页补满  
        var setdefult=setInterval(function (){  
            if(sover==1){  
                clearInterval(setdefult);     
            }else if($(".dvd-box").height()< window.innerHeight || len<4) { 
                loadmore($(window),true);  
            } else  
                clearInterval(setdefult);  
        },500);             
          
        //加载更多  
        function loadmore(obj,flag){ 
            //flag,未满屏情况下。
            if(finished==0 && sover==0){  
                var scrollTop = $(obj).scrollTop();  
                var scrollHeight = $(document).height();  //文档高度               
                var windowHeight = window.innerHeight;//可视区高度

                if($(".loadmore").length==0) {  
                    var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'  
                    $(".dvd-box").append(txt);  
                }  
                if (flag || scrollHeight - scrollTop - windowHeight <=500 ) {  
                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作  
                    //防止未加载完再次执行  
                    finished=1;  
                        $.ajax({  
                            type: 'GET',  
                            url: "alb/index/"+subjectids[page],  
                            success: function(data){  
                                if(data==""){  
                                    sover = 1;                        
                                    if (page == 1) {  
                                        $(".loadover").remove();  
                                    }  
                                }else{
                                    setTimeout(function(){  
                                       /*  $(".loadmore").remove(); */  
                                        $('.dvd-box .loadmore').before(data); 
                                        LazyLoad();
                                        imgError();
                                        page+=1;  
                                        finished=0;  
                                        //最后一页  
                                        if(page==len){  
                                            sover=1;  
                                            $(".loadmore").remove();  
                                        }  
                                    },100);  
                                }  
                            },  
                            error: function(xhr, type){  
                                console.log('Ajax error!');  
                            }  
                        }); 
                       
                }  
            }  
        }  
        //页面滚动执行事件  
        $(window).scroll(function (){  
            loadmore($(this)); 
        });