我如何測量光標在一個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

我想在這裏補充的片段，但沒有奏效。您可以在控制檯上檢查結果。