JSFiddle - React, Tailwind, and code Playground

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

.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;
}

JavaScript

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){
        	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
}