JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<div id="foo">

<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay5</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay9</div>
    <div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay5</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay</div>
<div id="foo2">Yay9</div>
    
    </div>

CSS

div#foo {
    background-color: grey;
    width: 200px;
    height: 200px;
    overflow:hidden;
}

JavaScript

$(document).ready(function(){
    var col = 255;
    
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta/120 > 0) {
            if(col < 245) col+=10;
            // $(this).text('scrolling up !').css('background-color', '#ffff' + col.toString(16));
        }
        else{
            if(col > 10) col-=10;
            // $(this).text('scrolling down !').css('background-color', '#ffff' + col.toString(16));
        }
    });
});