What I learned on this mini-project.
Used to return an elements sizes and position relative to the window.
https://gist.github.com/07792a13e8d1fc450588470dfcfe10eb
It returns an object, which represents the CSS borders associated with
the element. The values returned are read-only and can not be updated, these include left
, top
, x
and y
.
Values represent the border-box
in pixels and are relative to the top-left
of the viewport (this doesn't apply to width
and height
values).
When the scrolling position changes, the values returned, will adjust to
be bound, to the current top-left
of the viewport. So, to make sure
the values are bound to the top-left
of the document, you need to add the distance scrolled via scrollX
and scrollY
, shown below.