JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  
  <div class="container">
    
    <div class="inner"></div>
    
  </div>
  
</section>

CSS

body {
  
  height: 100%;
  overflow-y: auto;
  
}

section {
  height: 700px;
  padding-top: 300px;
  background: red;
}

.container {
  
  height: 300px;
  overflow-y: auto
  
}

.inner {
  
  height: 1000px;
  background: pink;
  
}

JavaScript

$("section").on("mousewheel wheel", function(e) {

	var dir = e.originalEvent.deltaY < 0 ? "up" : "down";

	if( $(e.target).is( "div.inner" ) ) {
  	
    var h = $(".container").height();
    var ih = $(".inner").height();
    var s = $(e.target).parent().scrollTop();
    
  	if( s + h >= ih && dir === "down" ) {
    	
      console.log("at bottom");
    
    } else if( s <= 0 && dir === "up" ) {
    	
      console.log("at top");
    
    }
  
  }

});