我如何测量光标在一个div中的位置？

Question

我不知道这个问题应该是什么问题。 但我解释说，我想要做什么。 我有一个类名为“scroll-inner-container”的div，这个div高度是70vh。 当我的鼠标悬停在这个div从顶部到10％（这是鼠标悬停区0％到10％在这个div）和底部到10％，然后一个函数将开始。

我怎样才能测量这个区域进入这个div通过使用js ...？

我的HTML代码如下所示：

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

我的CSS代码这里这个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

我以前使用过类似这样的代码项目，复制from 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+")"); 
}); 

一旦鼠标移过Y轴上的指定点，就可以执行您的代码。

Answer 2

我认为这段代码会帮助你。它会检查你的父容器的鼠标位置，你可以在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 for that

我想在这里补充的片段，但没有奏效。您可以在控制台上检查结果。