Find offset relative to parent scrolling div instead of window

Question

I have a scrolling element inside a window.

Say a division having a class "currentContainer" with overflow auto and that division contains huge amount of text so that it is definitely large enough to be scrolling.

Now I have to do some calculations based on how much the "currentContainer" has scrolled down + what is the offset of a specific element from its parent scrolling div (that is "currentCoantainer").

But while calculating offset I always get the offset of the inner child element with regard to window not with the "currentContainer".

JS FIDDLE

@Shikkediel I also tried using position().top instead of offset().top but is is also giving the same result. Have a look at it :

JS FIDDLE 2

Please do not suggest using :

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

Because this is going to complicate my actual calculations which I am about to do beyond this.

Reason for why I do not want to use the above mentioned approach is that I am trying to modify an existing code which is already too messy but is working perfectly with regard to window I just have to update it so that it starts working relative to its parent scrolling div.

I tried using above mentioned approach but it opened a box of crabs for me. because functions are too much tightly coupled. So I think if I can get simple and straight solution i.e. replacing .offset().top with something else.

---

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

P.S. It is actual code but not complete I think The rest of the code was not needed for this error.

Answer 1

You could just subtract the offset of the parent element from the offset of the child element. Will that complicate the other things you need to do as well?

$(".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;

and in Vanilla JS

var scrollOffset = document.querySelector('.container .element').offsetTop - document.querySelector('.container').offsetTop;

———————————

If you want background this should get you most of the way there:

// 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);

Also see: Calculate offset top of elements inside of a scrollable div

Answer 3

A vanilla Javascript solution would be:

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

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

Answer 4

In my test

//has the same value
console.log(
    'compare:',
    $("#element").offset().left - $("#container").offset().left,
    $("#element").position().left
);

Witch mean it gets absolute position to parent. To get relative position to parent, I use:

let relative_position_x = Element.position().left + scroller.scrollLeft();
let relative_position_y = Element.position().top + scroller.scrollTop();