Div相对于视口顶部的位置

Question

我想知道如何在Javascript中从div到窗口顶部获取像素量(或一般测量值).我不是在寻找与文档相关的偏移y,只是在浏览器显示的顶部.我在这里尝试了"已解答"的解决方案:是否可以在浏览器视口中获取div的位置？不在文件中.在窗口内,但至少在Safari中,我遇到了一个问题,无论div到底在哪里都返回相同的数字.

谢谢你的帮助!

Answer 1

现有答案现已过时.这种getBoundingClientRect()方法已经存在了很长一段时间,并且正是这个问题所要求的.此外,它支持所有浏览器.

从这个 MDN页:

返回的值是一个TextRectangle对象,它包含描述border-box的只读左,上,右和底属性,以像素为单位,左上角相对于视口的左上角.

你这样使用它:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;