javascript - 滚动太远

Question

检查这个fiddle .

假设滚动容器内的第一个可见元素是 #1 元素。在上面的 fiddle 中，我可以看到 #1、#2、#3 和 #4 元素。如果我是对的，如果我滚动一次我应该能够看到接下来的 4 个元素，即 #5、#6、#7 和#8。但是当我通过鼠标滚轮滚动一次时，滚动容器移动到 #15 元素。

请帮忙。

// 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:我在 github 上填写了一个问题

Answer 1

检查这个:

// 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

我刚刚在 slimscroll 之前加载了 div