JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv" style="width: 400px; height: 200px; border: 1px solid black; overflow: auto;">
        <p>asdasdas</P>
        <p>asdasdas</P>
        <p>asdasdas</P>
        <p>asdasdas</P>
        <p>asdasdas</P>
                <p>asdasdas</P>
                <p>asdasdas</P>
                <p>asdasdas</P>
                <p>asdasdas</P>
                <p>asdasdas</P>
                    <p>asdasdas</P>
                    <p>asdasdas</P>
                    <p>asdasdas</P>
                    <p>asdasdas</P>
    </div>
</div>

<div id="output">
</div>

JavaScript

$(document).ready(function()
{
   $('#myDiv').scroll(function()
   {
      var div = $(this);
      if (div[0].scrollHeight - div.scrollTop() == div.height())
      {
          alert('Reached the bottom!');
      }
       $('#output').text("scroll Position: " + div.height());
   });
});