17

Is this doable in either IE7 or Firefox?

Corey Trager
  • 22,649
  • 18
  • 83
  • 121

6 Answers6

37

You can do it in both - get the position relative to the document, then subtract the scroll position.

var e = document.getElementById('xxx');
var offset = {x:0,y:0};
while (e)
{
    offset.x += e.offsetLeft;
    offset.y += e.offsetTop;
    e = e.offsetParent;
}

if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
{
    offset.x -= document.documentElement.scrollLeft;
    offset.y -= document.documentElement.scrollTop;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft))
{
    offset.x -= document.body.scrollLeft;
    offset.y -= document.body.scrollTop;
}
else if (window.pageXOffset || window.pageYOffset)
{
    offset.x -= window.pageXOffset;
    offset.y -= window.pageYOffset;
}

alert(offset.x + '\n' + offset.y);
David Sykes
  • 48,469
  • 17
  • 71
  • 80
Greg
  • 316,276
  • 54
  • 369
  • 333
  • 2
    Please replace `position` with `offset` and `bodt` with `body`. – suzanshakya Dec 02 '10 at 09:45
  • 3
    hats-off... whoever wrote this. – Varun Apr 15 '11 at 09:12
  • 1
    This is a great answer, but one important note that might not have been relevant at the time of this answer: In browsers with "elastic scroll" like Chrome/Mac, the scrollTop can be negative (you can scroll past the page boundary and it will "bounce back"). If you're absolutely positioning elements based on this algorithm, you might need to account for this behavior, including out-of-bounds scroll offsets. – sstur Feb 05 '15 at 17:06
12

[Pasting from the answer I gave here]

The native getBoundingClientRect() method has been around for quite a while now, and does exactly what the question asks for. Plus it is supported across all browsers (including IE 5, it seems!)

From this MDN page:

The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport.

You use it like so:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;
Community
  • 1
  • 1
Himanshu P
  • 9,586
  • 6
  • 37
  • 46
4

Try the dimensions jQuery plugin. See this demo.

$('#myelement.').offset();
Pistos
  • 23,070
  • 14
  • 64
  • 77
3

In IE and Firefox 3, you can use getBoundingClientRect for this; no framework necessary.

But, yes, you should use a framework if you need to support other browsers as well.

savetheclocktower
  • 1,443
  • 7
  • 12
0

You could subtract the div's offsetTop from the document.body.scrollTop

This seems to work on IE7 and FF3, but on a very simple page. I haven't checked with nested DIVs.

rslite
  • 81,705
  • 4
  • 44
  • 47
  • No, the offsetTop only shows your position inside the parent div. This works for the top-level div and fails with others. Note how the first answer walks up through parents accumulating offsets. – mmaclaurin May 03 '12 at 20:57
0

Using Prototype it would be:

$('divname').viewportOffset.top
$('divname').viewportOffset.left
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176