iScroll 5 Base Fiddle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-zoom.min.js"></script>
<div id="scroller">
    <ul>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
        <li>Some Row</li>
    </ul>
</div>
<button id="btn-add" class="btn">Add Rows</button>

CSS

#scroller {
    outline:solid 1px #ccc;
    padding:0 4px;
    position: relative;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin:10px 0;
}
ul {
    list-style-type: none;
    display:block;
    padding:0;
    margin:0
}
li {
    display:block;
    border-bottom:solid 1px #ccc;
    line-height:20px;
    font-family:verdana;
    padding:5px;
    font-size:.8em
}
li:last-child {
    border-bottom :0
}
.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 3px;
    background:#fff;
    border: solid 1px #ccc
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
    color: #333333;
    text-decoration: none;
}
.btn:active, .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

JavaScript

var count = 0;
var ul = document.querySelector('ul');

var scroll = new IScroll('#scroller', {
    scrollbars: true,
    /* interactiveScrollbars: true, */
    mouseWheel: true,
    keyBindings: true,
    disableMouse: true
});

var btnAdd = document.querySelector('#btn-add');
btnAdd.addEventListener('click', addRows);

// add rows function
function addRows() {
    var li, i;
    for (i = 0; i < 3; i++) {
        li = document.createElement('li');
        li.innerText = 'New Row ' + (++count) + " added";
        ul.appendChild(li, ul.childNodes[0]);
    }
    setTimeout(function () {
        scroll.refresh();
    }, 0);
}

// prevent touch events from fighting with iScroll
document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);