JSFiddle - React, Tailwind, and code Playground

by nunzabar

HTML

<div id='content' style='overflow:scroll' class="scrollableDiv">
  <p>Content1</p>
  <p>Content2</p>
  <p>Content3</p>
  <p>Content4</p>    
  <p>Content5</p>
  <p>Content6</p>
  <p>Content7</p>
  <p>Content8</p> 
</div>

CSS

.scrollableDiv{
  border:1px solid gray;
  height:10em;
  overflow:scroll;
  min-height:5em;
}
.showBorder{border-top:2px solid red;}

JavaScript

var handled = false;
$('#content').scroll(function() {
    if (!handled) {
        handled = true;
        $('#content').addClass('showBorder');       
    }
});