JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">

  <div class="scroll">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>

</div>

CSS

#content {
  width: 100%;
  height: 1500px;
}

.scroll {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  overflow-y: scroll;
}

JavaScript

$(".scroll").hover(function() {
  var oldScrollPos = $(window).scrollTop();

  $(window).on('scroll.scrolldisabler', function(event) {
    $(window).scrollTop(oldScrollPos);
    event.preventDefault();
  });
}, function() {
  $(window).off('scroll.scrolldisabler');
});