JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<div class="container" data-bind="foreach: items, event: { mousewheel: scrolled }">
    <div class="item" data-bind="text: $data, css: { 'selected': $data == $parent.selected() }, click: $parent.select"></div>
</div>

CSS

.container {
    width: 140px;
    height: 300px;
    overflow-y: scroll;
}
.item {
}
.selected {
    background-color: blue;
    color: white;
}

JavaScript

var vm = {
    items: ko.observableArray([
        'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten',
        'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty',
        'twentyone', 'twentytwo', 'twentythree', 'twentyfour', 'twentyfive', 'twentysix', 'twentyseven', 'twentyeight', 'twentynine', 'thirty']),
    selected: ko.observable(),
    select: function (item) {
        vm.selected(item);
    },
    scrolled: function (vm, event) {
        var direction = Math.sign(event.deltaY), // 1 is down, -1 is up
            maxIdx = vm.items().length - 1,
            selectedIdx = vm.items.indexOf(vm.selected()) + direction;
        if (selectedIdx >= 0 && selectedIdx <= maxIdx) {
            vm.selected(vm.items()[selectedIdx]);
        }
        // return false; // implied as long as you don't return true
    }
};

vm.selected(vm.items()[0]);

ko.applyBindings(vm);