【问题标题】:how to get the browser window size without the scroll bars如何在没有滚动条的情况下获取浏览器窗口大小
【发布时间】:2011-11-22 11:20:59
【问题描述】:

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

当我使用这种方法时,我正在玩滚动条的宽度和高度来得出 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");

【问题讨论】:

  • 为什么不直接减去滚动条的宽度呢?这似乎很好。
  • 谢谢,但有没有办法获得滚动条的大小?
  • 嘿! - 你已经问了两次了! stackoverflow.com/questions/8220450/…
  • 几乎一样的问题,这个问题是指获取滚动条的高度和宽度..
  • 您应该已经编辑了其他问题。你在另一个问题中提到了这个问题。这本身就是重复

标签: jquery


【解决方案1】:
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(); 会产生:

Object
horizontal: 0
vertical: 17

我在 google chrome、IE7、opera 和 firefox 中使用。

【讨论】:

  • 感谢 Esailija,这看起来像 javascript,如何使用此函数获取垂直和水平的返回值?
  • @YetimworkBeyene, var dimensions = getScrollBarDimensions(); alert( dimensions.horizontal +"\n"+ dimensions.vertical );
  • @Esailija 如果我没记错的话,这会得到文档的尺寸而不是窗口的尺寸。
  • 即使我的页面同时具有垂直和水平滚动,也给我水平和垂直的 0 值。
猜你喜欢
  • 1970-01-01
  • 2010-11-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-08-31
  • 2018-05-11
  • 2013-11-04
  • 1970-01-01
相关资源
最近更新 更多