JSFiddle - React, Tailwind, and code Playground

by alpacalips

HTML

<div id="container">Container
    <div id="HoverScrollDown">Overflowing with scrollbars
    </div>
</div>
<button>Remove Scrollbars</button>

CSS

#container {
    height: 300px;
    width: 300px;
    padding: 15px;
    margin-bottom: 50px;
    border: 1px solid black;
}
#HoverScrollDown {
    width: 350px;
    height: 350px;
    overflow: scroll;
    border:1px solid red;
}

JavaScript

$('button').click(function() {
    $('#HoverScrollDown').animate({
        height: 250,
        width: 250
    },function() {
    if ($('#HoverScrollDown').outerHeight() < $('#container').innerHeight()) {
        $('.HoverScrollUp,#HoverScrollDown').css('visibility', 'hidden');
    }else if ($('#HoverScrollDown').outerWidth() < $('#container').innerWidth()) {
        $('.HoverScrollUp,#HoverScrollDown').css('visibility', 'hidden');
    }
    }); 
});