JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<div id="view"></div>
    <div id="togglescroll">toggle scrollbar</div>
<div id="container">
this container will trigger the vertical scrollbar
</div>

CSS

#container{
    width:100%;
    background:lightblue;
    height:2000px;
    display:none;
    
}
#view{
    border:1px solid red;
    margin-bottom:10px;
}
#togglescroll{
    background: yellow;
    cursor:pointer;
    border-radius:3px;
    border:1px solid orange;
    padding:4px;
    display:inline-block
    
}

JavaScript

$(function() {
    getinfo();
    $('#togglescroll').click(function(){
        $('#container').slideToggle( "fast" , function (){
            getinfo();
        });
        
    });
});



function getinfo(){
     $('#view').html('body width: '+$("body").width()+'</br>');
     $('#view').append('red rectangle width: '+$("#view").width()+' (2px < body because of border 1px)</br>'); 
    if ($("body").height()>$(window).height()) {
        $('#view').append('vertical scrollbar: yes');        
    }else{
        $('#view').append('vertical scrollbar: no'); 
    }
   
  

    
}