Javascript 如何以像素为单位计算工具栏、地址栏和其他导航工具的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3417139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i calculate the height of toolbars, address bars and other navigation tools in pixels?
提问by user357535
Basically i need to know how many pixels the y axis is from the top left of the screen until i reach the actual web window. Does anyone have any ideas...?
基本上我需要知道 y 轴距离屏幕左上角有多少像素，直到我到达实际的 Web 窗口。有没有人有任何想法......？
回答by Yanick Rochon
I don't know how you can return the height of external component, but I took this from http://www.alexandre-gomes.com/?p=115and adapted it to also return scroll bar height.
我不知道如何返回外部组件的高度，但我从http://www.alexandre-gomes.com/?p=115 中获取了它并将其调整为也返回滚动条高度。
Tested working in the following browsers :
测试在以下浏览器中工作：
If anyone can test it in other browsers and give me feedback, I will modify this answer accordingly.
如果有人可以在其他浏览器中测试并给我反馈，我会相应地修改此答案。
Using JQuery :
使用 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]
Without JQuery
没有 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)];
};
回答by Andy E
Unfortunately, I don't think there's a way to do this in all browsers at the minute. Chrome, Firefox, Safari and Opera all support window.innerHeightand window.outerHeight, so in those browsers, assuming you're not executing the code from within a frame, it's a case of:
不幸的是，我认为目前没有办法在所有浏览器中做到这一点。Chrome、Firefox、Safari 和 Opera 都支持window.innerHeight和window.outerHeight，因此在这些浏览器中，假设您不是从框架内执行代码，则是以下情况：
var chromeH = window.innerHeight - window.outerHeight;
That leaves (you guessed it) Internet Explorer, which doesn't support either of those properties. It's not even in IE9 PP3. To be fair to IE, they're not defined in the DOM specScrew the fairness, they're defined in the w3c CSSOM working draft. There is a "solution"1that involves resizing the window and resizing back again, but it causes the window to flicker and it will not work with a tabbed window.
剩下（你猜对了）Internet Explorer，它不支持这些属性中的任何一个。它甚至不在 IE9 PP3 中。 为了对 IE 公平，它们没有在 DOM 规范中定义，更公平地说，它们是在w3c CSSOM 工作草案中定义的。有一个“解决方案” 1涉及调整窗口大小并再次调整大小，但它会导致窗口闪烁，并且不适用于选项卡式窗口。
1 (scroll to the second example)
1（滚动到第二个例子）
回答by Jan ?afránek
This is only script I've found, which is working in webkit browsers ... :)
这是我发现的唯一脚本，它在 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;
};
Minimized version:
最小化版本：
$.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};
And you have to call it when document is ready ... so
你必须在文档准备好时调用它......所以
$(function(){ console.log($.scrollbarWidth()); });
Tested 2012-03-28 on Windows 7 in latest FF, Chrome, IE & Safari and 100% working.
2012 年 3 月 28 日在最新的 FF、Chrome、IE 和 Safari 中在 Windows 7 上测试，100% 工作。
source: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
来源：http: //benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
回答by Abdo
window.screenTop
Works in most major browsers except FF. For mobile webapps, this can be useful :-)
适用于除 FF 之外的大多数主要浏览器。对于移动网络应用程序，这可能很有用 :-)
In FF, you can use: window.screenX
在 FF 中，您可以使用： window.screenX
