JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">
  
  </div>
  <div class="inner">
  
  </div>
  <div class="inner">
  
  </div>
  <div class="inner">
  
  </div>
  <div class="inner">
  
  </div>
  <div class="inner">
  
  </div>
</div>

CSS

div.outer {
  height: 500px;
  width: 500px;
  background-color: red;
  overflow-y: scroll;
}

div.inner {
   height: 200px;
   width: 500px;
}

div.inner:nth-child(odd) {
    background: blue;
}

JavaScript

$( document ).ready(function() {
    $('div.outer').on('scroll mousewheel keydown keypress keyup', function (event) {
    const element = $(event.currentTarget);
    const shouldScroll = false;

    if (!shouldScroll) {
        event.preventDefault();
        event.stopPropagation();
        return false;   
    }
});
});