How to get the relative position of an object inside a scrollable div?

Question

I have a scrollable div, the one on the left in the above image.
In this div there exist many elements, lets focus on one of them (highlighted in grey) and call it A.

The right image is a representation of the div with the full size (without scroll or width setting) where A is placed without scrolling.

How may I find the value of X (in green), while having the left div currently on the page.
i.e. taking into consideration:

1. The div on page is already resized
2. The div on page is scrollable (and has been scrolled)
3. I want x not y !

i.e. How to get the relative y coordinate of an element inside a scrollable div ? in simple words: how to calculate x via javascript ?

Answer 1

Try this :

var elementTop = document.getElementById('yourElementId').offsetTop; var divTop = document.getElementById('yourDivId').offsetTop; var elementRelativeTop = elementTop - divTop;