我不知道问题的标题是什么......对此有所了解。 但我解释说我想做什么。 我有一个带有类名的div" scroll-inner-container"这个div高度是70vh。 当我的鼠标从顶部悬停到这个div到10%(这是鼠标悬停区域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>
我的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;
}
答案 0 :(得分:4)
我以前在项目中使用了与此类似的代码,复制自上一个问题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轴上的指定点后,您可以执行代码。
答案 1 :(得分: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
}
我试图将此处添加为代码段,但没有奏效。您可以在控制台上检查结果。