9

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...?

user357535
  • 91
  • 1
  • 1
  • 3

4 Answers4

14

I don't know how you can return the height of external component, but I took this from http://www.alexandre-gomes.com/?p=115 and adapted it to also return scroll bar height.

Tested working in the following browsers :

  • Chrome
  • FF 9+
  • IE9 (thank you Pax0r)
  • Opera (thank you Pax0r)

If anyone can test it in other browsers and give me feedback, I will modify this answer accordingly.

Using 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

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)];  
};
Community
  • 1
  • 1
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
  • In windows chrome, works fine... unless you change the display size to, say, 50% then this utility will report 34px, while they remain at 17px. 200% reports 8px. – jedierikb Aug 16 '12 at 01:57
  • what do you mean by "change the display size to ... 50%" ? – Yanick Rochon Aug 16 '12 at 01:59
  • Sorry, that was poorly communicated. I am referring to the browser zoom value. – jedierikb Aug 16 '12 at 02:02
  • 1
    read here http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers. this detail was not mentioned in the original question, and the average users do not even know about that feature. In any case, you can just scale the function's returned value with the browser zoom factor. – Yanick Rochon Aug 16 '12 at 10:30
  • 4
    That's the first time I've seen DOM code look clearer than jQuery – PandaWood Jul 04 '13 at 01:32
9

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.innerHeight and window.outerHeight, so in those browsers, assuming you're not executing the code from within a frame, it's a case of:

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 spec Screw the fairness, they're defined in the w3c CSSOM working draft. There is a "solution"1 that involves resizing the window and resizing back again, but it causes the window to flicker and it will not work with a tabbed window.

1 (scroll to the second example)

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • I think this got broken in Firefox, it returns 90px when maximized (correct value is 74px) and 81px when not maximized. – icl7126 Apr 10 '19 at 11:16
2

This is only script I've found, which is working in webkit browsers ... :)

$.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.

source: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Jan Šafránek
  • 893
  • 10
  • 13
1
window.screenTop

Works in most major browsers except FF. For mobile webapps, this can be useful :-)

In FF, you can use: window.screenX

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

Abdo
  • 13,549
  • 10
  • 79
  • 98