JSFiddle - React, Tailwind, and code Playground

by FL3N

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="content prevent-scroll">sdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdf sdfsdf sdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdf sdfsdfsdfsdf sdfsdf</div>

CSS

body {
  height: 200vh;
}

.content {
  display: inline-block;
  width: 400px;
  height: 400px;
  background-color: #666;
  padding: 30px;
  overflow-y: auto;
  font-size: 26px;
}

JavaScript

$(window).on('mousewheel DOMMouseScroll', function(e) {
	var $target = $(e.target);
  
  if($target.hasClass('prevent-scroll')) {
  	var scrollTop = $target.scrollTop();
    var scrollHeight = $target[0].scrollHeight;
    var height = $target.outerHeight(false);
    var delta = e.deltaY || e.detail * -1 || e.originalEvent.wheelDelta;
    
    if(scrollTop <= 0 && delta >= 0) {
      return false;
    }
    else if(scrollTop >= scrollHeight - height &&  delta < 0) {
    	return false;
    }
  }
});