1

JavaScript DOM Element Position (Scroll Position Included)

 2 years ago
source link: https://siongui.github.io/2012/07/01/javascript-dom-element-position-scroll-included/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

JavaScript DOM Element Position (Scroll Position Included)

Updated: February 18, 2015

To detect the position of a DOM element (for example, HTML div tag or p tag) in JavaScript is an interesting topic. In [1], [2], [3], and [4], there are discussion and code for detecting the position of a DOM elemenet. In [5], [6], [7], there are discussion and code for detecting the scroll position of a DOM element. In this post, sample code for detecting the DOM element position, including scroll position, will be shown.

Demo

Source Code for Demo (HTML):

position.html | repository | view raw 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript DOM Element Position (Scroll Position Included) Example</title>
</head>
<body>

<div>There are 4 buttons in this page, try to click them to get position.</div>
<br style="line-height: 2em;"/>

<button onclick="javascript:onButtonClick(this)">click me to get my position(1)</button><br />
<br style="line-height: 20em;"/>
<div style="text-align: center;"><button onclick="javascript:onButtonClick(this)">click me to get my position(2)</button></div>
<br style="line-height: 20em;"/>
<button onclick="javascript:onButtonClick(this)">click me to get my position(3)</button><br />
<br style="line-height: 20em;"/>
<div style="text-align: center;"><button onclick="javascript:onButtonClick(this)">click me to get my position(4)</button></div>

<script src="position.js"></script>
</body>
</html>

Source Code for Demo (JavaScript):

position.js | repository | view raw 
function getPosition( el ) {
  var body = document.documentElement || document.body;
  var scrollX = window.pageXOffset || body.scrollLeft;
  var scrollY = window.pageYOffset || body.scrollTop;
  _x = el.getBoundingClientRect().left + scrollX;
  _y = el.getBoundingClientRect().top + scrollY;
  return { top: _y, left: _x };
}

function onButtonClick(element) {
  alert("Poistion top: " + getPosition(element).top + "\nPosition left: " + getPosition(element).left);
}

The sample code above, however, is not complete. The code will not work if CSS margin property and absolute display property of a DOM element is set. For example, if the website designer uses the semi-fluid layout mentioned in this holy grail tutorial, the code above will not work because the margin and relative position is not taken into consideration in the sample code. The position function provided by jQuery in [11] will still work under such circumstance. I tried to trace the source code of jQuery in [10], but still cannot figure out how to do it. Maybe I will be back to this issue some time.

References:

[8]JavaScript tutorial - Browser specific referencing[9]W3C DOM Compatibility - CSS Object Model View[12].offset() – jQuery API[13]Get the position of an element relative to the document


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK