首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何获得元素相对于浏览器视窗的顶部位置?

如何获得元素相对于浏览器视窗的顶部位置?
EN

Stack Overflow用户
提问于 2009-08-29 05:44:55
回答 9查看 286K关注 0票数 233

我想要获取一个元素相对于浏览器的视区(显示页面的视区,而不是整个页面)的位置。在JavaScript中如何做到这一点呢?

非常感谢

EN

回答 9

Stack Overflow用户

发布于 2016-07-22 06:18:37

在我的例子中,为了安全起见,我在方程式中添加了window.scroll:

代码语言:javascript
复制
var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

这使我能够获得元素在文档上的实际相对位置,即使它已经被滚动。

票数 86
EN

Stack Overflow用户

发布于 2018-07-11 18:52:11

代码语言:javascript
复制
var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;
票数 21
EN

Stack Overflow用户

发布于 2018-02-13 00:05:55

jQuery很好地实现了这一点。如果你查看jQuery的offset的源代码,你会发现它基本上是如何实现的:

代码语言:javascript
复制
var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};
票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1350581

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档