JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll-box">
    <div id="content"></div>
</div>

CSS

#scroll-box {
    height:400px;
    overflow-y:scroll;
}
#content {
    height:20000px;
}

JavaScript

var $scroll_box = $('#scroll-box');
var extra = 50;
var prev_pos = $scroll_box.scrollTop();
$scroll_box.scroll(function() {
    if ($scroll_box.scrollTop() < prev_pos) {
        $scroll_box.scrollTop($scroll_box.scrollTop()-extra);
    } else if ($scroll_box.scrollTop() > prev_pos) {
        $scroll_box.scrollTop($scroll_box.scrollTop()+extra);
    }
    prev_pos = $scroll_box.scrollTop();
    /* >>> OVO JE PROMENA BOJE, MOZES OBRISATI */
    hex = ($scroll_box.scrollTop()%4096).toString(16);
    $scroll_box.css('background-color','#'+hex);
    /* <<< OVO JE PROMENA BOJE, MOZES OBRISATI */
});