<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="test"></div>
<script>
/**
*获取页面元素的滚动位置
@param {DOM} el Dom元素
*return {Object} 元素滚动位置对象
*/
function getScroll (el) {
var d = el,
doc = document,
body = doc.body,
docElement = doc.documentElement,
l,
t,
ret,
isStrict = document.compatMode == "CSS1Compat",
isIE = /msie/.test(navigator.userAgent);
if (d == doc || d == body) {
if (isIE && isStrict) {
l = docElement.scrollLeft;
t = docElement.scrollTop;
} else {
l = window.pageXOffset;
t = window.pageYOffset;
}
ret = {
left: l || (body ? body.scrollLeft : 0),
top: t || (body ? body.scrollTop : 0)
};
} else {
ret = {
left: d.scrollLeft,
top: d.scrollTop
};
}
return ret;
}
/**
*获取页面元素的位置
@param {DOM} el Dom元素
*return {Object} 元素位置对象
*/
function getXY (el) {
var doc = document, bd = doc.body,
docEl = doc.documentElement,
leftBorder = 0,
topBorder = 0,
ret = [0, 0],
round = Math.round,
box,
scroll,
isIE = /msie/.test(navigator.userAgent);
if (el != doc && el != bd) {
if (isIE) {
try {
box = el.getBoundingClientRect();
// 在ie8之前版本, documentElement 元素会有两像素的边框, 所以要减去它
topBorder = docEl.clientTop || bd.clientTop;
leftBorder = docEl.clientLeft || bd.clientLeft;
} catch (ex) {
box = { left: 0, top: 0 };
}
} else {
box = el.getBoundingClientRect();
}
scroll = getScroll(document);
ret = [round(box.left + scroll.left - leftBorder), round(box.top + scroll.top - topBorder)];
}
return ret;
}
var div = document.getElementById("test");
var sc = getXY(div);
console.log(sc);
</script>
</body>
</html>