JSFiddle - React, Tailwind, and code Playground

HTML

<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>

<div class="scrollable"> 
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
    <p> Text </p>
</div>

<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>
<p> Text </p>

CSS

.scrollable { margin:10px; padding:10px; width:200px; height:100px; background:yellow; overflow-x:hidden; overflow-y:scroll; }

JavaScript

$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
    
    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});