JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child" id="id">
        
        This is text <br/><Br/><br/><Br/><br/><br/><br/><br/>
        <br/><Br/><br/><Br/><br/><br/><br/><br/>
        <br/><Br/><br/><Br/><br/><br/><br/><br/>
    </div>
</div>

CSS

.parent{
    overflow:hidden;
    width:50%;
    margin:0 auto;
    border:2px solid black;
    height:300px;
}
.child{
    
border:1px solid red;
}

JavaScript

function do_it(e){
    var jump = 50;
    var parentHeight = parseInt(this.parentNode.offsetHeight)-50;
	var childHeight = parseInt(this.offsetHeight);
	var i = parseInt(this.style.marginTop, 10) || 0;
	var wheel = e.wheelDeltaY;
	var childHeightNew = childHeight + i;
				
    if(wheel == -120){
		if(childHeightNew > parentHeight){													
				i -= jump;	
		}
	}else if(wheel == 120){
		if( (childHeightNew < childHeight) && i < 0){
				i += jump;
            if(i>0){
                    i=0;
            }
		}
	}
this.style.marginTop = i + 'px';
}

document.getElementById('id').addEventListener('mousewheel',do_it,false);