[Javascript] offsetParent and position. (Any guru awake?)

Hakan M. hakan at backbase.com
Tue Dec 16 08:55:40 CST 2003


Righteo people, here's a mouthful for you. I have a nice and working 
function for getting the exact coordinates of any element anywhere on 
the screen, be it absolutely positioned or floating wild. I am, of 
course, walking upwards from the element I wish to measure, using 
offsetParent, adding appropriate offsetTop/offsetLeft, 
scrollTop/scrollLeft-values as I go.

Now it works, real good, EXCEPT; When creating a DIV (for example) and 
giving it a height and overflow:scroll things start to break down, at 
least in Mozilla.

Consider the following code:
_______________________________________

<div style="height:200px;overflow:scroll">
	<br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br />
	<span id="WankerSpan">Wank Wank Wank</span>
</div>
_______________________________________

If I scroll the div, the coordinates I get from "WankerSpan" will be 
misplaced with... that's right, the amount of pixels I have scrolled. 
Now don't get me wrong here, I'm not stupid enough to forget about the 
scrollTop value, you see, THIS code actually works, and gives me the 
correct coordinates of "WankerSpan":
_______________________________________

<div style="position:relative;height:200px;overflow:scroll">
	<br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br />
	<span id="WankerSpan">Wank Wank Wank</span>
</div>
_______________________________________

A quick testcase revealed to me that unless the div has a position set 
to relative or absolute the browser doesn't consider it to be an 
offsetParent, thus not giving me its scrollTop/scrollLeft values. Oh, 
position:static didn't work either.

So, wa-wa-wa-what's up, Moz? Or is it *illegal* to set overflow:scroll 
on a non-positioned element according to any specs or recommendations? 
Surprisingly enough, Internet Explorer doesn't give a rats ass regarding 
the positioning of my div, I get the "WankerSpan" coordinates right 
every time.

Pointers, explanations, curses, anything goes.
Thankyou in advance,
Hakan.




More information about the Javascript mailing list