element's top-left corner coordinates relative to the document page.
๐ฐ JS โฉ browser โฉ DOM โฉ types โฉ Element โฉ methods โฉ .position()
viewport position relative to document coordinates.
.boundingBox of Element relative to viewport.
mouse event / touch event - .clientX, .clientY
Last updated
Was this helpful?
Was this helpful?
// ๐ธ elem.position()
Element.prototype.position = function(coordSystem='document'){
// viewport to element = (x, y)
const {x, y} = this.getBoundingClientRect();
switch(coordSystem){
// relative to "viewport"
case 'viewport': return vec(x, y);
// relative to "document"
// document to viewport = (scrollX, scrollY)
default: return vec(scrollX + x, scrollY + y);
}
};// elements
const doc = document.documentElement; // <html> element
const info = $('#scrollInfo');
const span1 = $('#span1');
const coords = $('#pageCoords');
// scroll handler
window.onscroll = (event) => {
info.innerText = `viewport in page: ${viewport.positionInDocument}`;
coords.innerHTML = `
span in page: ${span1.position()}<br>
span in viewport: ${span1.position('viewport')}
`;
};