JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
 <div style="overflow:auto;height:170px;"
      @scroll="getScrollParam">
  <ul :style="listStyle">
    <li style="height:17px" 
        v-for="num in displayList">{{num}}</li>
  </ul>
 </div>
</div>

JavaScript

var list = [];
for (var i = 0; i < 100000; i++) {
   list.push(i);
}
var listItemHeight = 17;
var displayRowNum = 10;

new Vue({
    el: '#app',
    data: function(){
    	return {
      	list:list,
        scroll:0,
        scrollMax: (list.length - displayRowNum) * listItemHeight
      }
    },
    computed:{
      displayList:function(){
      	var startIndex = parseInt(this.scroll/listItemHeight,10);
        return this.list.slice(startIndex,startIndex+displayRowNum);
      },
      listStyle:function(){
      	return {
         'padding-top':this.scroll + 'px',
         'padding-bottom':(this.scrollMax - this.scroll) + 'px',
         'margin':0
        }
      }
    },
    methods:{
    	getScrollParam:function(e){
      	this.scroll = e.target.scrollTop;
      }
    }
})