JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
  Box A
  <div class="b">
    Box B
  </div>
</div>

<div id="debug">

</div>

CSS

.a {
  width: 400px;
  overflow: auto;
  background: yellow;
}

.b {
  width: 1200px;
  background: red;
}

JavaScript

var boxa = document.querySelector('.a');
var debugbox = document.querySelector('#debug');
var maxScrollLeft = boxa.scrollWidth - boxa.clientWidth;
boxa.addEventListener('scroll', function(){
  debugbox.innerHTML = this.scrollLeft + ',' + maxScrollLeft;
  if(this.scrollLeft == maxScrollLeft) alert('reached end of scroll');
})