JSFiddle - React, Tailwind, and code Playground

HTML

<div class="area area1">
</div>

<div class="area area2">
</div>

CSS

.area{
    overflow:auto;
    max-height:250px;
    width:250px;
    background:#000;
    color:#FFF;
    position:fixed;
    top:100px;
    //-webkit-transform: translateZ(0);
}
.area2 {
  left: 400px;
  background: #666;
}

JavaScript

var txt="Have you thoroughly searched for an answer before asking your question? Sharing your research helps everyone. Tell us what you found (on this site or elsewhere) and why it didn’t meet your needs. This demonstrates that you’ve taken the time to try to help yourself, it saves us from reiterating obvious self, it saves us from reiterating obvious answers, and above all, it helps you get a more specific and relevant answer! Have you thoroughly searched for an answer before asking your question? Sharing your research helps everyone. Tell us what you found (on this site or elsewhere) and why it didn’t meet your needs. This demonstrates that";

$.fn.scrollGuard = function() {
    return this
        .on( 'mousewheel', function ( e ) {
            var event = e.originalEvent;
            var d = event.wheelDelta || -event.detail;
            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
};    

    $.fn.scrollGuard2 = function() {
      return this
        .on( 'wheel', function ( e ) {
          var $this = $(this);
          if (e.originalEvent.deltaY < 0) {
            /* scrolling up */
            return ($this.scrollTop() > 0);
          } else {
            /* scrolling down */
            return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
          }
        })
      ;
    };    

$(function(){

		$('body').append(txt.repeat(10));
		$('.area').text(txt.repeat(2));
    $( '.area1' ).scrollGuard();
    $( '.area2' ).scrollGuard2();
});