JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.secretdreamer.co.uk/lab/mouse_wheel.js"></script>
<div style="height:900px; border:0;">
    <div id="test">0</div>
    <span id="test_ov"></span>
</div>

CSS

div {
    float:left;
    width:25px;
    height:25px;;
    text-align:center;
    margin:5px;
    padding:5px;
    border:1px solid #bbb;
}
#test_ov {
    position:absolute;
    background:rgba(45,65,40,0.3);
}

JavaScript

$(document).ready(function(){
     
    var testWidth = $('#test').outerWidth(),
        testHeight = $('#test').outerHeight(),
        testPadding = 5;
                
    $('#test_ov').css('width',testHeight + 'px');
    $('#test_ov').css('height',testHeight + 'px');
    $('#test_ov').css('margin-left','-' + ((testWidth) + testPadding) + 'px');
    $('#test_ov').css('margin-top','+' + testPadding + 'px');

    $('#test_ov').on('mousewheel', function(event, delta){
        
        event.preventDefault();

        var currentValue = parseInt($('#test').text(),10),
            newValue = currentValue + delta;
        
        if(newValue < 100 & newValue > -100){

            $('#test').text(newValue);
        }
    });
});