how can i measure cursor position in a div..?

Question

i don't know what should be the question title..sorry for this. but i explain that what i want to do. i have a div with class name "scroll-inner-container" this div height is 70vh. when my mouse hover into this div from top to 10% (this is the mouse hover area 0% to 10% in this div) and bottom to 10% then a function will start.

How can I measure this area into this div by using js...?

My html code looks like:

<div class="scroll-inner-container">
  <div class="paragraph-space content">
    <h1>top position</h1>           
      <p>Lorem ipsum dolor...</p>
    <h1>end position</h1>
</div>

my css code here for this div:

.scroll-inner-container{
height: -moz-calc(70vh + 0px);
height: -webkit-calc(70vh + 0px);
height: calc(70vh + 0px);
overflow: auto;
object-fit: cover;
background-color: yellow;
position: relative;
}

Answer 1

I've previously used code similar to this for a project, copied from a previous question How to get mouse position - relative to element

var x,y;
$("#div1").mousemove(function(event) {
    var offset = $(this).offset();
    x = event.pageX- offset.left;
    y = event.pageY- offset.top;
    $("#div1").html("(X: "+x+", Y: "+y+")");
});

Once the mouse goes past a specified point on the Y axis, you can execute your code.