JSFiddle - React, Tailwind, and code Playground

HTML

<div>
      <div class="case1">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
      </div>
      <div class="success">Smacked the bottom</div>
    </div>
    <div>
      <div class="case2">
        <span><Lorem>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</Lorem><tempor>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</tempor><quis>nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</quis><consequat>. Duis aute irure dolor in reprehenderit in voluptate velit esse</consequat><cillum>dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</cillum><proident>, sunt in culpa qui officia deserunt mollit anim id est laborum.</proident></span>
      </div>
      <div class="success">Smacked the bottom</div>
    </div>
    <div>
      <div class="case3">
        <span><Lorem>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</Lorem><tempor>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</tempor><quis>nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</quis><consequat>. Duis aute irure dolor in reprehenderit in voluptate velit esse</consequat><cillum>dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</cillum><proident>, sunt in culpa qui officia deserunt mollit anim id est laborum.</proident></span>
      </div>
      <div class="success">Smacked 80% of the bottom</div>
    </div>

    <div>
      <div class="case5">
        <span><Lorem>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</Lorem><tempor>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</tempor><quis>nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</quis><consequat>. Duis aute irure dolor in reprehenderit in voluptate...

CSS

body > div {
        margin-right: 25px;
        float: left;
        width: 150px;
      }
      
      .success {
        display: none;
        margin-bottom: 25px;
        float: left;
      }
      
      .case1, .case2, .case3, .case5 {
        display: inline;
        float: left;
        max-height: 150px;
        width: 150px;
        overflow-y: scroll;
        border: 1px solid black;
      }

JavaScript

(function(e){"use strict";e.fn.smack=function(t){t=t||{};var n=e(this),r=new e.Deferred,i=t.threshold||1;n.on("scroll.smack",function(){var t=n.scrollTop(),s=n[0]===window?n.height():n.innerHeight(),o=n[0]===window?e(document).height():n[0].scrollHeight,u=t+s,a=i.toString().toLowerCase().indexOf("px")>=0?o-parseInt(i,10):o*i;if(u>=a){n.off("scroll.smack");r.resolve()}});return r.promise()}})(window.jQuery);


$('.case1').smack()
.done(function () {
    $('.case1').siblings('.success').first().fadeIn('fast');
});

$('.case2').smack()
.done(function () {
    $('.case2').siblings('.success').first().fadeIn('fast');
});

$('.case3').smack({ threshold: 0.8 })
.done(function () {
    $('.case3').siblings('.success').first().fadeIn('fast');
});

  $('.case5').smack({ threshold: '50px' })
    .done(function () {
      $('.case5').siblings('.success').first().fadeIn('fast');
    });