我想获得一个元素相对于浏览器的视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?
非常感谢
我想获得一个元素相对于浏览器的视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?
非常感谢
当前回答
谢谢你的回答。Prototype似乎已经有了这样一个函数(page()函数)。通过查看该函数的源代码,我发现它首先计算相对于页面的元素偏移位置(即文档顶部),然后从中减去scrollTop。更多细节请参见原型的源代码。
其他回答
编辑:添加一些代码来处理页面滚动。
function findPos(id) {
var node = document.getElementById(id);
var curtop = 0;
var curtopscroll = 0;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
} while (node = node.offsetParent);
alert(curtop - curtopscroll);
}
}
id参数是你想要偏移量的元素的id。改编自一个奇怪的帖子。
在我的例子中,为了安全起见,我添加了窗口。滚动到方程式:
var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;
这允许我获得文档上元素的真实相对位置,即使它已经被滚动。
本页上的函数将返回一个矩形,其中包含传递的元素相对于浏览器视图端口的上、左、高和宽坐标。
localToGlobal: function( _el ) {
var target = _el,
target_width = target.offsetWidth,
target_height = target.offsetHeight,
target_left = target.offsetLeft,
target_top = target.offsetTop,
gleft = 0,
gtop = 0,
rect = {};
var moonwalk = function( _parent ) {
if (!!_parent) {
gleft += _parent.offsetLeft;
gtop += _parent.offsetTop;
moonwalk( _parent.offsetParent );
} else {
return rect = {
top: target.offsetTop + gtop,
left: target.offsetLeft + gleft,
bottom: (target.offsetTop + gtop) + target_height,
right: (target.offsetLeft + gleft) + target_width
};
}
};
moonwalk( target.offsetParent );
return rect;
}
你可以试试:
节点。offsetTop - window.scrollY
它在定义了视口元标签的Opera上工作。
谢谢你的回答。Prototype似乎已经有了这样一个函数(page()函数)。通过查看该函数的源代码,我发现它首先计算相对于页面的元素偏移位置(即文档顶部),然后从中减去scrollTop。更多细节请参见原型的源代码。