JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
    <div id="target"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem erat, condimentum convallis dolor ut, ali sem. Nullam malesuada, nisl in pretium pharetra, ante magna tincidunt purus, sed viverra dolor orci vel erat. Maecenas fermentum metus ac odio imperdiet, non dapibus nibh orci aliquam.</div> </div>
    <div id="log"></div>
    <div id="log2"></div>
</div>

CSS

#body {
    max-height: 400px;
}

#target {
    width: 50px;
    overflow-y: scroll;
    max-height: 300px;
}

#log, #log2 {
    position: absolute;
    right: 0;
}

#log {
    top: 0;
}

#log2 {
    top: 20px;
}

JavaScript

$(function () {
    var myCounter = 0,
        myOtherCounter = 0;
    var scroll = 0;

    $("#target").scroll(function () {
        myCounter = myCounter + 1;
        $("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
    });

    //Firefox
    $('#body').bind('DOMMouseScroll', function (e) {
        if (e.originalEvent.detail > 0) {
            scrollDown();
        } else {
            scrollUp();
        }

        //prevent page fom scrolling
        return false;
    });

    //IE, Opera, Safari
    $('#body').bind('mousewheel', function (e) {
        if (e.originalEvent.wheelDelta < 0) {
            scrollDown();
        } else {
            scrollUp();
        }
        //prevent page fom scrolling
        return false;
    });
    
    function scrollDown() {
        //scroll down
        console.log('Down ' + scroll);
        if (scroll < $('#target').find('div').height() - $('#target').height() + 20) {
            scroll = $('#target').scrollTop() + 5;
            $('#target').scrollTop(scroll);
        }
    };
    function scrollUp() {
        //scroll up
        console.log('Up ' + scroll);
        if (scroll > 0) {
            scroll = $('#target').scrollTop() - 5;
            $('#target').scrollTop(scroll);
        }
    };
});