---
title: "Objektets position om det ligger i en div med scrollbar"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/146601-objektets-position-om-det-ligger-i-en-div-med-scrollbar"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "kristoffer"
published: "2006-05-08T15:27:01.000Z"
updated: "2006-05-10T12:30:25.000Z"
replies: 3
views: 498
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/146601-objektets-position-om-det-ligger-i-en-div-med-scrollbar"
---

# Objektets position om det ligger i en div med scrollbar

## #1 — kristoffer, 2006-05-08T15:27Z

Hur kan jag få reda på de korrekta x- och y-koordinaterna för ett objekt (till exempel en tabell) som ligger i en DIV som har **style="OVERFLOW:auto;"**? Tanken är att nedanstående kod skall placeras lagret **foo** i övre vänstra hörnet i tabellen (objektet). Men om tabellen och lagret foo ligger inuti ett yttre lager som har scrollbars så placeras foo fel. Hjälp!

```
<HTML>
	<HEAD>
		<SCRIPT>
		var lastTableObject = null;
		var lastEditDivObject = null;

		function mouseLeaves (element, evt) {
			if (typeof evt.toElement != 'undefined' && evt.toElement && typeof element.contains != 'undefined') {
				return !element.contains(evt.toElement);
			}
			else if (typeof evt.relatedTarget != 'undefined' && evt.relatedTarget) {
				return !contains(element, evt.relatedTarget);
			}
		}
					
		function findPosX(obj)
		{
			var curleft = 0;
			if (obj.offsetParent)
			{
				while (obj.offsetParent)
				{
					curleft += obj.offsetLeft;
					obj = obj.offsetParent;
				}
			}
			else if (obj.x)
				curleft += obj.x;
			return curleft;
		}

		function findPosY(obj)
		{
			var curtop = 0;
			if (obj.offsetParent)
			{
				while (obj.offsetParent)
				{
					curtop += obj.offsetTop;
					obj = obj.offsetParent;
				}
			}
			else if (obj.y)
				curtop += obj.y;
			return curtop;
		}
		
		function showhide(objTable, layer_ref, state) 
		{
			newX = findPosX(objTable);			
			newY = findPosY(objTable);
			
			if (document.all) {
				obj = document.getElementById(layer_ref);
				
				if (state == 0) 
				{
					if (mouseLeaves(objTable, event) && mouseLeaves(obj, event)) {
						obj.style.visibility = 'hidden';
						objTable.style.border = "";
					}
				}
				else if (state == 1) 
				{
					if (lastTableObject && lastEditDivObject) 
					{
						if (lastEditDivObject.style.visibility == 'visible')
						{
							lastEditDivObject.style.visibility = 'hidden';
						}
						lastTableObject.style.border = "";
					}					
					obj.style.visibility = 'visible';
					obj.style.top = newY + 'px';
					obj.style.left = newX + 'px';
					objTable.style.border = "1px dotted red";
				}
			}			
			lastTableObject = objTable;
			lastEditDivObject = obj;
		}
		</SCRIPT>
	</HEAD>
	<BODY>
		<center>
			<div style="OVERFLOW:auto;HEIGHT:400px;WIDTH:400px;">
				<TABLE onmouseover="showhide(this, 'foo', 1);" onmouseout="showhide(this, 'foo', 0);" height="100%" cellSpacing="0" cellPadding="0" width="300" border="0">
					<TR>
						<TD vAlign="top">Morbi varius, ante a ornare interdum, dolor elit luctus dui.</TD>
					</TR>
				</TABLE>
				<DIV id="foo" style="POSITION:absolute;">TEXT TEXT</DIV>
			</div>
		</center>
	</BODY>
</HTML>
```

Permalänk: https://www.webforum.nu/p/146601

## #2 — kristoffer, 2006-05-10T09:49Z

Ingen som har någon idé?

Permalänk: https://www.webforum.nu/p/1812810

## #3 — zcorpan, 2006-05-10T10:54Z

Jag är inte säker att jag förstått frågeställningen, men vad händer om du ändrar: 

```
<div style="OVERFLOW:auto;HEIGHT:400px;WIDTH:400px;">
```

 ...till: 

```
<div style="position:relative; OVERFLOW:auto;HEIGHT:400px;WIDTH:400px;">
```

...?

Permalänk: https://www.webforum.nu/p/1812833

## #4 — kristoffer, 2006-05-10T12:30Z

Det fungerar inte. Här är två sidor som demonstrerar problemet:

<http://www.alien.se/scroll/without-scrollbars.htm>
Utan scrollbars, fungerar korrekt.

<http://www.alien.se/scroll/with-scrollbars.htm>
Med scrollbars, fungerar inte korrekt.

Jag vill att scriptet skall fungera i båda fallen.

Permalänk: https://www.webforum.nu/p/1812855

---

Tråden på webben: https://www.webforum.nu/amne/html-css/146601-objektets-position-om-det-ligger-i-en-div-med-scrollbar
