JSFiddle - React, Tailwind, and code Playground

by magnus16

HTML

<div id="parent">
    <div id="scrollable"></div>
</div>

CSS

#scrollable {
    max-height: 200px;
    overflow: auto;
    background: #ddd;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
    max-width: 75%;
}
#parent {
    overflow: auto;
    background: #eee;
}
.overflowHidden {
    overflow:hidden !important;
}

JavaScript

for (var i = 0; i <= 300; i++) {
        if (i < 50) $('#scrollable').append($('<div>Scroll me hard!</div>'));
        $('#parent').append($('<div>Watch me scroll</div>'));
    }
    $('#scrollable').hover(function () {
        console.log("hello");
        $('body').addClass('overflowHidden');
    }, function () {
        $('body').removeClass('overflowHidden');
    });