jquerycssscrolloverflowscrolltop

Find offset relative to parent scrolling div instead of window


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.


Solution

  • 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/