如何在没有滚动条的情况下获取浏览器窗口大小 [英] how to get the browser window size without the scroll bars

问题描述

如何在没有滚动条的宽度和高度的情况下获得浏览器窗口的大小?

How to get the browser window size without the width and height of the scroll bars?

使用这种方法时，我在玩滚动条的宽度和高度以得出34.

When I use this method, I'm playing with the width and height of the scroll bars to come up with 34.

     var $windowW = ($(window).width() - 34);
     var $windowH = ($(window).height() - 34);
     alert($windowW + "  " + $windowH); // THe results are width 1440 and 745 height
     $("body").css("width", $windowW);
     $("body").css("height", $windowH);
     $("body").css("border","1px solid green");

推荐答案

function getScrollBarDimensions(){
var elm = document.documentElement.offsetHeight ? document.documentElement : document.body,

    curX = elm.clientWidth,
    curY = elm.clientHeight,

    hasScrollX = elm.scrollWidth > curX,
    hasScrollY = elm.scrollHeight > curY,

    prev = elm.style.overflow,

    r = {
    vertical: 0,
    horizontal: 0
    };


    if( !hasScrollY && !hasScrollX ) {
    return r;
    }

elm.style.overflow = "hidden";

    if( hasScrollY ) {
    r.vertical = elm.clientWidth - curX;
    }

    if( hasScrollX ) {
    r.horizontal = elm.clientHeight - curY;
    }
elm.style.overflow = prev;


return r;
}

在此页面上运行getScrollBarDimensions();会产生:

Running getScrollBarDimensions(); on this page yields:

Object
horizontal: 0
vertical: 17

对我来说，是谷歌浏览器，IE7，歌剧和Firefox.

for me in google chrome, IE7, opera and firefox.

这篇关于如何在没有滚动条的情况下获取浏览器窗口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！