如何获得元素相对于浏览器视口的顶部位置？ [英] How to get an element's top position relative to the browser's viewport?

问题描述

我想获取元素相对于浏览器视口的位置（显示页面的视口，而不是整个页面）。如何在JavaScript中完成？

I want to get the position of an element relative to the browser's viewport (the viewport in which the page is displayed, not the whole page). How can this be done in JavaScript?

非常感谢

推荐答案

现有答案现已过时。本机 getBoundingClientRect（）方法现在已经存在了很长一段时间，并且正是问题所要求的。此外，它支持所有浏览器（包括IE 5，似乎！）

The existing answers are now outdated. The native getBoundingClientRect() method has been around for quite a while now, and does exactly what the question asks for. Plus it is supported across all browsers (including IE 5, it seems!)

来自 MDN页面：

返回的值是TextRectangle对象，其中包含描述边框的只读左，上，右和底属性（以像素为单位），左上角相对于视口的左上角。

你这样使用它：

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

这篇关于如何获得元素相对于浏览器视口的顶部位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！