How can I measure the cursor position in a div.?

I do not know how the title of the question should be. but I will explain what I want to do. I have a div with class name "scroll-inner-container", this div height is 70vh. when my mouse hovers over this div from the top to 10% (this is the mouseover area from 0% to 10% in this div), and from the bottom to 10%, after which the function starts.

How can I measure this area in this div using js ...?

My html code looks like this:

<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 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;
}
+4
source share
2 answers

Earlier I used code similar to this for the project, copied from the previous question How to get the mouse position relative to an 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+")");
});

Y, .

+4

, . . if.

var obj = $('.scroll-inner-container');
var top, left, bottom, right;
var excldH,objHeight,objWidth;
getPos(obj)

//Calls fuction on mouse over
obj.mousemove(function(e) {
    handleMouseMove(e)
});

//Get position of mouse pointer
function handleMouseMove(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    if(posY > top+excldH && posY < bottom - excldH){
        //Here your stuffs go
        console.log(posX)
        console.log(posY)
    }
}

// Get position of the div 'scroll-inner-container'
function getPos(obj) {
    var offsets = obj.offset();
    objHeight = obj.height();
    objWidth = obj.width();
    excldH = objHeight/10; //Caculating 10% height
    top = offsets.top,
    // left = offsets.left,
    bottom = top+objHeight,
    // right = left+objWidth
}

jsfiddle

, . .

+2

Source: https://habr.com/ru/post/1686909/


All Articles