JSFiddle - React, Tailwind, and code Playground

by Anonim Sorry

HTML

<div id="masterDiv" style="overflow:auto;height:800px;">
    <div id="cntDiv" class='FloatingContainer'>
        </br>
        <center>Floating/Absolute test div</br>
            </br>Curently Listening to Mikkas - Moth</center>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <BR></BR>
        <center>test</center>
    </div>
</div>

CSS

.FloatingContainer {
    position:absolute;
    top:25%;
    left:25%;
    background-color:lightgrey;
    border:1px solid black;
    width:400px;
    height:300px;
    overflow:auto;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size:16px;
}

JavaScript

var hovered_over = false;

$(document).bind("DOMMouseScroll", function (e) {
    if (hovered_over == true) 
    {
        var direction = e.originalEvent.detail;
        var target = e.originalEvent.originalTarget;
        if (direction > 0) {
            if (target.scrollTopMax == target.scrollTop) {
                return false;
            }
        } else if (direction < 0) {
            if (target.scrollTop == 0) {
                return false;
            }
        }
        console.log(target);
        console.log(direction);
    }

});


$("#cntDiv").on("mouseenter", function (crtl) {
    hovered_over = true;
});

$("#cntDiv").on("mouseleave", function (crtl) {
    hovered_over = false;
});