JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">Yay</div>

CSS

div {
    background-color: blue;
    width: 200px;
    height: 200px;
}

JavaScript

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