JSFiddle - React, Tailwind, and code Playground

HTML

<div id="listHolder"></div>

CSS

html, body {

    width:100%;

    height:100%;

    padding:0;

    margin:0

}

.listItem {

    border:1px solid gray;

    padding:0 5px;

    width: margin : 1px 0px;

}

#listHolder {

    height:100%;

    width:100%;

    background-color:#CCC;

    box-sizing:border-box;

    overflow:hidden

}

JavaScript

(function () {
    var list = (function () {
        var temp = [];
        for (var i = 0, l = 70; i < l; i++) {
            temp.push("list-item-" + (i + 1));
        }
        return temp;
    }());
    function listItem(text,id) {
        var _div = document.createElement('div');
        _div.innerHTML = text;
        _div.className = "listItem";
        _div.id = id;
        return _div;
    }
    var listHold = document.getElementById('listHolder'),
        ht = listHold.clientHeight,
        wt = listHold.clientWidth,
        ele = listItem(list[0], 'item0'), 
        frag = document.createDocumentFragment();
    listHold.appendChild(ele);
    var ht_ele = ele.clientHeight, filled = ht_ele,filledIn = [0];
    for (var i = 1, l = list.length; i < l; i++) {
        if(filled + ht_ele < ht){
          filled += ht_ele;
          ele = listItem(list[i],'item'+i);
          frag.appendChild(ele);
        }else{
            filledIn.push(i);
            break;
        }
    }
    listHold.appendChild( frag.cloneNode(true) );
    var elements = document.querySelectorAll('#listHolder .listItem');
    function MouseWheelHandler(e) {
    	var e = window.event || e;
	    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        console.log(delta);
        //if(filledIn[0] != 0 && filledIn[0] != list.length){
            if(delta == -1){
                var start = filledIn[0] + 1, end = filledIn[1] + 1,counter = 0;
                if(list[start] && list[end]){
                    for(var i = filledIn[0]; i < filledIn[1]; i++){
                        if(list[i]){
                         (function(a){ elements[counter].innerHTML = list[a];}(i));
                         counter++;
                        }
                    }
                    filledIn[0] = start;
                    filledIn[1] = end;
                }
            }else{
                var start = filledIn[0] - 1, end = filledIn[1] - 1,counter = 0;
               ...