В принципе, мне нужно знать, сколько пикселей ось y находится в верхнем левом углу экрана, пока я не достигнет фактического веб-окна. У кого-нибудь есть идеи...?
Как вычислить высоту панелей инструментов, адресных баров и других инструментов навигации в пикселях?
Ответ 1
Я не знаю, как вы можете вернуть высоту внешнего компонента, но я взял это из http://www.alexandre-gomes.com/?p=115 и адаптировал его для также верните высоту полосы прокрутки.
Протестировано в следующих браузерах:
Если кто-то может протестировать его в других браузерах и дать мне отзыв, я соответствующим образом изменю этот ответ.
Использование 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)];
};
Ответ 2
К сожалению, я не думаю, что есть способ сделать это во всех браузерах за минуту. Chrome, Firefox, Safari и Opera поддерживают window.innerHeight и window.outerHeight, поэтому в этих браузерах, предполагая, что вы не выполняете код из фрейма, это случай:
var chromeH = window.innerHeight - window.outerHeight;
Это оставляет (вы уже догадались) Internet Explorer, который не поддерживает ни одно из этих свойств. Это даже не в IE9 PP3. Чтобы быть справедливым в отношении IE, они не определены в спецификации DOM Отверните справедливость, они определены в w3c CSSOM рабочий проект. Существует "solution" 1 который включает изменение размера окна и изменение размера обратно, но это заставляет окно мерцание, и оно не будет работать с окном с вкладками.
1 (перейдите к второму примеру)
Ответ 3
Это только script, который я нашел, который работает в браузерах 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-03-28 в Windows 7 в последних версиях FF, Chrome, IE и Safari и 100% работает.
источник: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
Ответ 4
window.screenTop
Работает в большинстве основных браузеров, кроме FF. Для мобильных webapps это может быть полезно: -)
В FF вы можете использовать: window.screenX