如何测量 div 中的光标位置..？

Question

我不知道问题标题应该是什么……抱歉。但我解释说我想做什么。我有一个类名为“scroll-inner-container”的 div，这个 div 高度是 70vh。当我的鼠标从顶部悬停到这个 div 的 10%（这是这个 div 中的鼠标悬停区域 0% 到 10%）和底部到 10% 时，一个函数将启动。

如何使用js将这个区域测量到这个div中......？

我的 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>

我这里 div 的 css 代码：

.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

我以前在一个项目中使用过与此类似的代码，从上一个问题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 轴上的指定点，您就可以执行您的代码。