页面宽高-滚动条相关JS

/********************
 * 取窗口滚动条距离文档顶部高度 
 ******************/
function getInfo() { 
    var s = ""; 
    s += " 网页可见区域宽:"+ document.body.clientWidth; 
    s += " 网页可见区域高:"+ document.body.clientHeight; //body
    s += " 网页可见区域宽:"+ document.body.offsetWidth + "||" + document.documentElement.clientWidth + " (包括边线和滚动条的宽,Chrome不包括滚动条)"; 
    s += " 网页可视区域宽:"+ window.innerWidth + " (除了IE以外,包括滚动条)";
    s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的高,Chrome包括滚动条)";
    s += " 网页可见区域高:"+ window.innerHeight + " (Chrome包括滚动条)"; 
    s += " 网页正文全文宽:"+ document.body.scrollWidth; 
    s += " 网页正文全文高:"+ document.body.scrollHeight; //窗口
    s += " \n网页被卷去的高(ff):"+ document.body.scrollTop; 
    s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop; 
    s += " 网页被卷去的左:"+ document.body.scrollLeft; 
    s += " 网页正文部分上:"+ window.screenTop; 
    s += " 网页正文部分左:"+ window.screenLeft; 
    s += " \n屏幕分辨率的高:"+ window.screen.height; 
    s += " 屏幕分辨率的宽:"+ window.screen.width; 
    s += " 屏幕可用工作区高度:"+ window.screen.availHeight; 
    s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; 
    s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
    s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
    console.log (s); 
} 
/********************
 * 取窗口滚动条距离文档顶部高度 
 ******************/
function getScrollTop()
{
    var scrollTop = 0;
    if(document.documentElement && document.documentElement.scrollTop)
    {
        scrollTop = document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}
/********************
 * 取窗口滚动条本身的宽度 
 ******************/
function getScrollWidth() {
    var noScroll, scroll, oDiv = document.createElement("DIV");
    oDiv.style.cssText = "position:absolute;top:-100px;width:100px;height:100px; overflow:hidden;";
    noScroll = document.body.appendChild(oDiv).clientWidth;
    oDiv.style.overflowY = "scroll";
    scroll = oDiv.clientWidth;
    document.body.removeChild(oDiv);
    return noScroll-scroll;
}
/********************
 * 判断一个容器是否出现竖向的滚动条,给固定的顶部标题加padding使两个容器对齐 
 * <div id="tag2">序号  名称  价格</div>
 * <div id="tag1" style="height:600px;overflow-y:auto;">
     * 1   运动手环      298.00
     * 2   智能电饭锅    638.00
 * </div>
 ******************/
function setPaddingR (tag1,tag2,width){
    if(!$(tag1)[0]){
        return
    }
    if($(tag1)[0].scrollHeight>$(tag1)[0].clientHeight || $(tag1)[0].offsetHeight > $(tag1)[0].clientHeight){ 
        $(tag2).css("padding-right",width || "17px");
    }else{
        $(tag2).css("padding-right","0");
    }     
 };
/********************
 * 取窗口可视范围的高度 
 *******************/
function getClientHeight()
{
    var clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight:document.documentElement.clientHeight;        
    }
    else
    {
        var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight:document.documentElement.clientHeight;    
    }
    return clientHeight;
}
/********************
 * 取文档内容实际高度 
 *******************/
function getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

猜你喜欢

转载自blog.csdn.net/bluelotos893/article/details/80476610