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

Я не знаю, как можно вернуть высоту внешнего компонента, но я взял это из 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)];  
};

К сожалению, я не думаю, что в настоящий момент есть способ сделать это во всех браузерах. Все Chrome, Firefox, Safari и Opera поддерживают window.innerHeight и window.outerHeight , поэтому в этих браузерах, предполагая, что вы не выполняете код из фрейма, это случай of:

var chromeH = window.innerHeight - window.outerHeight;

Остается (как вы уже догадались) Internet Explorer, который не поддерживает ни одно из этих свойств. Это даже не в IE9 PP3. Чтобы быть справедливым по отношению к IE, они не определены в спецификации DOM К черту справедливости, они определены в рабочем проекте w3c CSSOM . Существует «решение» ¹ , которое включает изменение размера окна и его повторное изменение, но оно вызывает мерцание окна, и оно не будет работать с окном с вкладками.

^{1 (перейдите ко второму примеру)}