JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="first-child">
s, ligula in vulputate dapibus, urna arcu dictum leo, ac semper nisi risus elementum elit. Aliquam euismod lacus massa. Morbi fermentum mattis faucibus. Aenean ultrices, enim non pulvinar dictum, nibh orci tempor quam, a pretium augue quam sed lectus. Nullam auctor, nunc a dignissim pretium, lacus mauris dictum elit, et faucibus risus augue id risus. Curabitur mollis vestibulum augue, sed vulputate orci consectetur quis. Cras vel mollis urna. Ut eu fermentum elit.
Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac
s, ligula in vulputate dapibus, urna arcu dictum leo, ac semper nisi risus elementum elit. Aliquam euismod lacus massa. Morbi fermentum mattis faucibus. Aenean ultrices, enim non pulvinar dictum, nibh orci tempor quam, a pretium augue quam sed lectus. Nullam auctor, nunc a dignissim pretium, lacus mauris dictum elit, et faucibus risus augue id risus. Curabitur mollis vestibulum augue, sed vulputate orci consectetur quis. Cras vel mollis urna. Ut eu fermentum elit.
Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac
m dolor sit amet, consectetur adipiscing elit. Etiam aliquam est ac dolor auctor vestibulum. Duis tristique metus non diam pulvinar et vehicula elit venenatis. Aliquam vel convallis tellus. Aliquam erat volutpat. Ut venenatis, ligula ut aliquam imperdiet, quam nisl ultricies...
CSS
.first-child
{
height: 300px;
overflow: scroll;
}
JavaScript
$(function() {
var $child= $('.first-child');
$child.bind('mousewheel', function(e) {
if((this.scrollTop === (this.scrollHeight - this.clientHeight) && e.wheelDelta < 0) || (this.scrollTop === 0 && e.wheelDelta > 0)) {
return false;
}
});
});