JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="hideScrollbar">hide scrollbar</div>
</div>

CSS

.container {
    height: 1200px;
    background: grey;
    width: 100%;
}

.hideScrollbar {
    color: white;
    font-size: 30px;
}

JavaScript

$('.hideScrollbar').click(function(e){
    e.preventDefault();
    if($(this).hasClass('is_hidden')) {   
        $('.container').css('height', '1200px');
        $(this).removeClass('is_hidden');
        $(this).html('hide scrollbar');
    } else {
        $('.container').css('height', '100px');
        $(this).addClass('is_hidden');
        $(this).html('show scrollbar');  
    }
});

$(window).on('resize', function(){
    if($(document).height() > $(window).height()) {
        alert('scrollbar is visible');
    } else {
        alert('scrollbar is not visible');
    }
});