Как вычислить высоту панелей инструментов, адресных баров и других инструментов навигации в пикселях?

Ответ 1

Я не знаю, как вы можете вернуть высоту внешнего компонента, но я взял это из http://www.alexandre-gomes.com/?p=115 и адаптировал его для также верните высоту полосы прокрутки.

Протестировано в следующих браузерах:

• Chrome
• 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)];  
};

Ответ 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 (перейдите к второму примеру)}

Ответ 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

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