我想获得一个元素相对于浏览器的视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?
非常感谢
我想获得一个元素相对于浏览器的视口(显示页面的视口,而不是整个页面)的位置。如何在JavaScript中做到这一点?
非常感谢
当前回答
根据德里克的回答。
/**
* Gets element's x position relative to the visible viewport.
*/
function getAbsoluteOffsetLeft(el) {
let offset = 0;
let currentElement = el;
while (currentElement !== null) {
offset += currentElement.offsetLeft;
offset -= currentElement.scrollLeft;
currentElement = currentElement.offsetParent;
}
return offset;
}
/**
* Gets element's y position relative to the visible viewport.
*/
function getAbsoluteOffsetTop(el) {
let offset = 0;
let currentElement = el;
while (currentElement !== null) {
offset += currentElement.offsetTop;
offset -= currentElement.scrollTop;
currentElement = currentElement.offsetParent;
}
return offset;
}
其他回答
在我的例子中,为了安全起见,我添加了窗口。滚动到方程式:
var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;
这允许我获得文档上元素的真实相对位置,即使它已经被滚动。
谢谢你的回答。Prototype似乎已经有了这样一个函数(page()函数)。通过查看该函数的源代码,我发现它首先计算相对于页面的元素偏移位置(即文档顶部),然后从中减去scrollTop。更多细节请参见原型的源代码。
function inViewport(element) {
let bounds = element.getBoundingClientRect();
let viewWidth = document.documentElement.clientWidth;
let viewHeight = document.documentElement.clientHeight;
if (bounds['left'] < 0) return false;
if (bounds['top'] < 0) return false;
if (bounds['right'] > viewWidth) return false;
if (bounds['bottom'] > viewHeight) return false;
return true;
}
源
var element = document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
这里有一些关于Angular2 +的东西。在版本13上测试
event.srcElement.getBoundingClientRect().top;