My question is fairly straightforward: How can you find the offsetTop of a child element compared to it's parent element (rather than the window top)?
The definition of offsetTop states that the property will return the value by which a child element is offset from the top of an offsetParent, but this doesn't seem to be the case in this JSFiddle: http://jsfiddle.net/h5KBK/.
My goal is to find the offset of the bolded orange text from the top of the scrollable div, not the window top. Is there any way to do this without calculating the heights of the above elements, paddings, margins, etc. and subtracting it from the offsetTop?
I'm looking for a JavaScript only solution. No jQuery please.
By definition offsetTop returns the top position of the object relative to the top side of its offsetParent element, in pixels.
Now offsetParent needs to be an element with a position other than static. If you change the position attribute of scroll element in your fiddle I get a value of 1012 as opposed to 1110 without the position attribute.
Actually, I did some more research and figured out the answer. The offsetParent must have a specified position:absolute or position:relative declaration, as shown in this JSFiddle: http://jsfiddle.net/h5KBK/1/
Related
I would like to use JS to calculate how far a user scrolled down a page.
I'm trying to use a combination of scrollY and document.body.offsetHeight
But what I'm finding is that scrollY at the bottom of a page is returning 6883 but the document.body.offsetHeight is returning a value of 7392 - which leaves me in a place where I can't calculate the how far a user scrolled down the document.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
Typically, offsetHeight is a measurement in pixels of the element's
CSS height, including any borders, padding, and horizontal scrollbars
(if rendered). It does not include the height of pseudo-elements such
as ::before or ::after. For the document body object, the measurement
includes total linear content height instead of the element's CSS
height. Floated elements extending below other linear content are
ignored.
So if I understand this correctly, it's taking into account the document in view of the viewport - so that should return the value of 6883, the same if a user scrolls the full length of the page.
What property do you use to calculate full scrollable view of a document, to compare to the max value of scrollY?
Please try using document.body.offsetHeight-window.innerHeight it should return the expected scrollable value.
getClientBoundingRect is a function that gets a position of element relative to viewport.
Is there a function that is able set value instead?
That's what CSS is for. You use CSS to position your elements in the viewport, and since getting the position of an element relative to a viewport and/or other elements is more problematic, you have getClientBoundingRect (and a lot of other element-specific DOM API methods).
What is the difference between getBoundingClientRect().top and offsetTop?
https://codepen.io/anon/pen/bWZWQg
const elem = document.querySelector('#find');
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top);
console.log('offsetTop: ' + elem.offsetTop);
// Stuff to push the div down the page
<div id='find'>Find me</div>
From my quick test the only difference seems to be the number of decimal places returned.
getBoundingClientRect gives you offset relative to your client viewport, While offsetTop is always fixed static property. although it changes when the actual position of the element changes on document. For real clarification go to pen and you can check the difference your self.
If element is inside relative container then offsetTop will be relative to the given container
pen
console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position.
console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's relative to your current view port.
see the pen, scroll the div and while doing that check the console.
In case container of the element is relative then
console.log('offsetTop: ' + elem.offsetTop) // //This is fixed. it get's calculated from beginning of your top most relative container.
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
getBoundingClientRect() is a very useful, cross browser safe method that returns top, right, bottom, and left position of any element relative to the viewport.
The method getBoundingClientRect may not be as good in performance as offsetLeft (doc here), but if you wanna know an element's position after it transformed by CSS, or even still in transition animation, it is the best choice (maybe the only way).
Here is a Related answer.
What is the most accurate way of retrieving top position of relative positioned element to window?
i know about getBoundingClientRect() but this returned wrong numbers.
I have several elements ( relative positioned ) inside containers and need to retrieve elements offsetTop to window top. The containers are both relative or absolute positioned. Is there any method without iterating over parent elements and so on?
document.querySelectorAll('.your-selector')[0]
.getBoundingClientRect().top + window.pageYOffset - document.documentElement.clientTop
I have a scrollable div somewhere on-screen.
I have a child of that div somewhere in it.
How can I scroll the div to place this child in the center of the visible region?
(How would I determine the visible width and height of the div, and how would I scroll to place a rectangular control centered in this?)
element.scrollIntoView() might be what your looking for.
http://jsfiddle.net/a9s2G/
scrollIntoView docs
If you use jQuery you can try scrollTo plugin.
In pure js this can be done using element.scrollTop. You will need to get position of your element inside <div> and than using that value scroll main div.
To calculate inner element position you will need to get it offset top and left property related to the parent element using offsetTop and offsetLeft properties.
To center your element you may also need to use element.scrollLeft