I'm trying to find out where a user has clicked in a div.  For instance, if he clicked halfway down a DIV that has height 100pixels, I would want to retrieve "50".

I got help on this forum on how to do that, and it seemed to work fine.

But then I put an image in the DIV.  The image was too high for the DIV, so I added a style: "overflow-y:scroll" to the DIV.

To get the position where the user clicked, I now had to add "scrollTop()" to the number above.

This worked fine.

If I scrolled down, and clicked in the DIV, I got a reasonable number.

BUT - when I clicked on the image at about the same vertical position, I got a number that was HIGHER than the entire height of the DIV.

So lets say the DIV is 160 pixels high.  I put in an image that is 200 pixels high.  I do this deliberately, so that the DIV will be forced to have a vertical scrollbar in my test.

I click near the bottom of the DIV.  I get a click-position of 199.  That makes sense.  Then I try clicking near the bottom of the IMAGE that is in the DIV.  I get a click position of 244.

That is very strange.

Here is my code:

1. 
          $(document).ready(function () {
              alert("divheight " + $("#divWithImage").prop("scrollHeight"));
              $("#divWithImage").click(function (e) {
                  var clickpos = $(this).scrollTop() + e.offsetY;
                  alert("clickpos is " + clickpos);
              });
         return;
      
       })
   <div id="divWithImage" style="overflow-y:scroll;min-height:160px;height:160px;background-color:blue;overflow-x:hidden;">
       <img src="/images/addvideo.gif" style="height:200px"/></div>