JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content... <br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...<br>
     All your text content...
</div>
<span>Reached bottom</span>

CSS

div.box{
 /*  width: 200px;
  height: 200px;
  overflow: scroll; */
}

JavaScript

$("span").hide();


$(".box").scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        $("span").show();    
    } else {
        $("span").hide();
    }
});