Scroll is moving too far

Question

Check this fiddle.

Suppose the first visible element inside the scroll container is #1 element. In the above fiddle, I can see #1, #2, #3 and #4 elements. and if I am right, if I scroll once I should be able to see next 4 elements i.e #5, #6, #7 and #8. But when I scroll once through mousewheel, the scroll container is moving to #15 element.

Please help.

// update content every second
function addChild() {
    var el = $('<div></div>').html('#' + $('#testDiv').children().length)
        .css({
        padding: '3px',
        border: '1px solid #ccc',
        margin: '5px'
    });
    $('#testDiv').append(el);

    // update slimscroll every time content changes
    $('#testDiv').slimscroll();
}

$('#testDiv').slimscroll({
    alwaysVisible: true,
    height: 150
});

for (var i = 0; i < 300; i++) {
    addChild();
}

PS: I filled an issue on github

Answer 1

Check this:

// update content every second
function addChild() {
    var el = $('<div></div>').html('#' + $('#testDiv').children().length)
        .css({
        padding: '3px',
        border: '1px solid #ccc',
        margin: '5px'
    });
    $('#testDiv').append(el);

    // update slimscroll every time content changes
    $('#testDiv').slimscroll();
}


for (var i = 0; i < 300; i++) {
    addChild();
}

$('#testDiv').slimscroll({
    alwaysVisible: true,
    height: 150
});

JSFiddle

I have just loaded the div before the slimscroll