如何计算工具栏、地址栏和其他导航工具的高度（以像素为单位）？

Question

基本上，我需要知道 y 轴距离屏幕左上角有多少像素，直到我到达实际的 Web 窗口。有没有人有什么想法...？

Answer 1

window.screenTop

适用于除 FF 之外的大多数主流浏览器。对于移动网络应用程序，这可能很有用:-)

在FF中，你可以使用：window.screenX

http://www.w3schools.com/jsref/prop_win_screenleft.asp

Answer 2

我不知道如何返回外部组件的高度，但我从http://www.alexandre-gomes.com/?p=115 获取了这个并将其调整为也返回滚动条高度。

在以下浏览器中测试工作：

• 铬
• FF 9+
• IE9 （谢谢Pax0r）
• Opera （谢谢Pax0r）

如果有人可以在其他浏览器中测试并给我反馈，我会相应地修改这个答案。

使用 JQuery ：

jQuery.getScrollBarSize = function() {
   var inner = $('<p></p>').css({
      'width':'100%',
      'height':'100%'
   });
   var outer = $('<div></div>').css({
      'position':'absolute',
      'width':'100px',
      'height':'100px',
      'top':'0',
      'left':'0',
      'visibility':'hidden',
      'overflow':'hidden'
   }).append(inner);

   $(document.body).append(outer);

   var w1 = inner.width(), h1 = inner.height();
   outer.css('overflow','scroll');
   var w2 = inner.width(), h2 = inner.height();
   if (w1 == w2 && outer[0].clientWidth) {
      w2 = outer[0].clientWidth;
   }
   if (h1 == h2 && outer[0].clientHeight) {
      h2 = outer[0].clientHeight;
   }

   outer.detach();

   return [(w1 - w2),(h1 - h2)];
};

alert( $.getScrollBarSize() ); // in Chrome = [15,15] in FF = [16,16]

没有 JQuery

function getScrollBarSize () {  
   var inner = document.createElement('p');  
   inner.style.width = "100%";  
   inner.style.height = "100%";  

   var outer = document.createElement('div');  
   outer.style.position = "absolute";  
   outer.style.top = "0px";  
   outer.style.left = "0px";  
   outer.style.visibility = "hidden";  
   outer.style.width = "100px";  
   outer.style.height = "100px";  
   outer.style.overflow = "hidden";  
   outer.appendChild (inner);  

   document.body.appendChild (outer);  

   var w1 = inner.offsetWidth;  
   var h1 = inner.offsetHeight;
   outer.style.overflow = 'scroll';  
   var w2 = inner.offsetWidth;  
   var h2 = inner.offsetHeight;
   if (w1 == w2) w2 = outer.clientWidth;
   if (h1 == h2) h2 = outer.clientHeight;   

   document.body.removeChild (outer);  

   return [(w1 - w2),(h1 - h2)];  
};

Answer 3

这是我找到的唯一一个脚本，它在 webkit 浏览器中工作...... :)

$.scrollbarWidth = function() {
  var parent, child, width;

  if(width===undefined) {
    parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
    child=parent.children();
    width=child.innerWidth()-child.height(99).innerWidth();
    parent.remove();
  }

 return width;
};

最小化版本：

$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};

你必须在文件准备好时调用它......所以

$(function(){ console.log($.scrollbarWidth()); });

于 2012 年 3 月 28 日在 Windows 7 上使用最新的 FF、Chrome、IE 和 Safari 进行测试，并且 100% 正常工作。

来源：http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Answer 4

不幸的是，我认为目前在所有浏览器中都没有办法做到这一点。 Chrome、Firefox、Safari 和 Opera 都支持 window.innerHeight 和 window.outerHeight，所以在这些浏览器中，假设你不是在一个框架内执行代码，情况如下：

var chromeH = window.innerHeight - window.outerHeight;

剩下的是（你猜对了）Internet Explorer，它不支持这些属性中的任何一个。它甚至不在 IE9 PP3 中。 为了公平起见，它们并没有在 DOM 规范中定义 不公平，它们是在 w3c CSSOM working draft 中定义的。有一个"solution"¹ 涉及调整窗口大小并再次调整大小，但它会导致窗口闪烁并且它不适用于选项卡式窗口。

^{1（滚动到第二个示例）}