JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li class="a" style="color: red">A</li>
    <li class="b">B</li>
    <li class="c">C</li>
    <li class="d">D</li>
</ul>

JavaScript

var i = 0;
//list of classes
var lis = ['a', 'b', 'c', 'd'], length = lis.length;
document.addEventListener("wheel", ColorLi);

function ColorLi(e) {
    //reset colors
    for(var j = 0; j < length; j++)
        document.getElementsByClassName(lis[j])[0].style.color = "black";
    //calculate index
    if(e.wheelDelta > 0)
        i++;
    else
        i--;
    //fix index out of range
    i = i < 0 ? 0 : i;
    i = i > length-1 ? length-1 : i;
    //set color
    document.getElementsByClassName(lis[i])[0].style.color = "red";
}