The right view is about the JS element.getBoundingClientRect()
function, which gives you
viewport-relative coordinates of an HTML element.
The viewport is the currently visible part of the HTML page (that may be much bigger).
By using boundingClientRect
together with window.page*Offset
(see left view)
you can calculate any element's page-absolute coordinates.
On small-devices you might find the getBoundingClientRect()
display for this page
in bottom-right corner, because some do not implement CSS position: fixed
as specified.
CAUTION: the values you see here may be browser-specific! For example, Firefox
provides scrollTop
on the document.documentElement
,
while Webkit browsers like Opera and Chrome provide it on document.body
.
pageXOffset | Distance between left edge of page and left edge of viewport |
pageYOffset | Distance between upper edge of page and upper edge of viewport |
innerWidth | Width of page, including scrollbars, excluding browser edge decorations |
innerHeight | Height of page, including scrollbars, excluding browser title- and tool-bars |
outerWidth | Width of browser window, including browser edge decorations |
outerHeight | Width of browser window, including browser title bar |
scrollX | Same as pageXOffset, but deprecated |
scrollY | Same as pageYOffset, but deprecated |
scrollLeft | Distance between left edge of element and left edge of its visible part |
scrollTop | Distance between upper edge of element and upper edge of its visible part |
scrollWidth | Overall width of element, including overflowing parts |
scrollHeight | Overall height of element, including overflowing parts |
clientWidth | Visible width, excluding margin, border, scrollbar and overflow |
clientHeight | Visible height, excluding margin, border, scrollbar and overflow |
clientTop | Thickness of border on top of the element |
clientLeft | Thickness of border on left of the element |
property | value |
---|---|
pageXOffset | 0 |
pageYOffset | 0 |
innerWidth | 1280 |
innerHeight | 720 |
outerWidth | 1280 |
outerHeight | 720 |
scrollX | 0 |
scrollY | 0 |
property | value |
---|---|
scrollLeft | 0 |
scrollTop | 0 |
scrollWidth | 2568 |
scrollHeight | 2209 |
clientWidth | 1280 |
clientHeight | 720 |
property | value |
---|---|
scrollLeft | 0 |
scrollTop | 0 |
scrollWidth | 2560 |
scrollHeight | 2179 |
clientWidth | 1264 |
clientHeight | 2179 |
property | value |
---|---|
scrollTop | 0 |
scrollHeight | 200 |
clientHeight | 200 |
property | value |
---|---|
scrollTop | 0 |
scrollHeight | 400 |
clientHeight | 200 |
left | top | width | height |
---|---|---|---|
0 | 0 | 1280 | 2209 |
left | top | width | height |
---|---|---|---|
8 | 21 | 1264 | 2179 |
left | top | width | height |
---|---|---|---|
408 | 861 | 200 | 200 |
left | top | width | height |
---|---|---|---|
408 | 1111 | 180 | 400 |