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 delta = e.wheelDelta || e.detail;
        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
    });