Find offset relative to parent scroll of div instead of window

Question

I have a scrollable element inside a window.

Say the section with the class "currentContainer" with automatic overflow, and this separation contains a huge amount of text, so it is definitely large enough to scroll.

Now I need to do some calculations based on how much the "currentContainer" scrolls + what is the offset of a specific element from its parent scroll div (that is, "currentCoantainer").

But when calculating the offset, I always get the offset of the inner child relative to the window, not with "currentContainer".

JS FIDDLE

@Shikkediel I also tried using position().top instead of offset().top , but also gives the same result. Look at this:

JS FIDDLE 2

Please do not offer to use:

 $("<reference of scrolling element").scrollTop() + $("<reference of child element whose offset I want to calculate>").offset().top 

Because it will complicate my actual calculations, which I am going to do outside of this.

The reason I don't want to use the above approach is because I am trying to modify existing code that is already too messy but works fine with respect to the window. I just need to update it so that it starts working on its parent scroll div.

I tried to use the above approach, but he opened for me a box of crabs. because the functions are too tightly coupled. Therefore, I think that if I can get a simple and direct solution, that is, replace .offset().top with something else.

---

I tried debugging the code and still no luck, I added the actual code to http://jsfiddle.net/arpitajain/kwkm7com/

PS This is actual code, but not complete. I think the rest of the code is not needed for this error.

Answer 1

You can simply subtract the offset of the parent from the offset of the child. Will this complicate the other things you need to do?

 $(".getoffset").offset().top - $(".getoffset").offsetParent().offset().top 

http://jsfiddle.net/kmLr07oh/2/

Answer 2

This is probably what you are looking for.

 var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop 

-----------

If you need a background, this will help you go most of the way:

 // Position of first element relative to container top var scrollTop = $(".container .element").offset().top - $(".container").offset().top; // Position of selected element relative to container top var targetTop = $(".container > *").offset().top - $(".container").offset().top; // The offset of a scrollable container var scrollOffset = scrollTop - targetTop; // Scroll untill target element is at the top of its container $(".container").scrollTop(scrollOffset); 

See also: Calculate the top offset of elements inside a scrollable div element.

Answer 3

The vanilla Javascript solution will look like this:

 const el = document.querySelector('.getoffset'); const offset = el.getBoundingClientRect().top - el.offsetParent.getBoundingClientRect().top; 

Fiddle: http://jsfiddle.net/njb1xcz0/