JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "scroll-click">Scroll click is:</div>
<div class = "container">
  <div class  = "inner">
  </div>
</div>

CSS

.container{
  display: inline-block;
  max-height: 300px;
  width: min-content;
  overflow: auto;
  background: black;
}
.inner{
  width: 200px;
  height: 600px;
  
  background-image: linear-gradient(45deg, blue, red);
}

JavaScript

const container = document.querySelector(".container");
const scrollClick = document.querySelector(".scroll-click"); 
const _addEventListener = EventTarget.prototype.addEventListener;

function isScrollClick(e)
{
  const {clientWidth} = this;
  const {clientX, target} = e;
  if(this == target){
    if(clientX >= clientWidth ){
       return true;
     }
  }
 
  return false;
}

EventTarget.prototype.addEventListener = function(eventName, callback, options){
  let _callback = callback;
  if(eventName == "mousedown" && options && options.scrollClick){
    _callback = (e) => {
      e.scrollClick = isScrollClick.call(this, e);
      callback(e);
     
    };
  }
  _addEventListener.call(this, eventName, _callback, options);
}

container.addEventListener("mousedown", (e) => {
  scrollClick.innerText = `Scroll click is: ${e.scrollClick || "false"}`
}, {scrollClick: true})