JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pop">
	<span></span>
</div>

CSS

body {height:2000px;}
div {overflow-y:scroll;width:80%;height:400px;padding:20px;margin:300px auto 0;background:brown;}
span {display:block;height:1200px;background:#fff;}

JavaScript

var pop = document.getElementById('pop');

function scrolled(e){
	var currentScroll = pop.scrollTop,
		maxScroll = pop.scrollHeight - pop.offsetHeight,
		scrolledDown = e.detail > 0 || e.wheelDelta < 0,
		scrolledUp = e.detail < 0 || e.wheelDelta > 0;

	if ((currentScroll == 0 && scrolledUp) || (currentScroll == maxScroll && scrolledDown)) {
		e.preventDefault();
		e.stopPropagation();
	}
}

pop.addEventListener("DOMMouseScroll", scrolled, false);
pop.addEventListener("mousewheel", scrolled, false);