JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div id="container1"><div id="scroll"></div>
  <div id="container2">
    <div id="the_text">some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf 
    some text<br /> sadfsdf </div>
  </div>
</div>

CSS

#container1 {
  position:relative;
    background-color: silver;
    display:  block;
    height: 0;
    padding-bottom: 50%;
    width: 50%;
    margin:0 auto; 
    overflow: hidden;
}

#container2 { 
position:absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -17px; 
    overflow: auto;
    padding:10px;
}
#scroll{
  display:none;
  position:absolute;
  bottom:0;
  right:0;
  width:40px;
  height:40px;
  background-image:url('https://media.giphy.com/media/9D7e87wvGmBxPwnLrR/giphy.gif');
  opacity:.5;
  background-size:cover;
  z-index:3;
}

JavaScript

$(window).on('load resize', function( ){
var con2 =$('#container2').height(),text =$('#the_text').height();
if(text>con2){
	$('#scroll').show();
}else{
	$('#scroll').hide();}
})