Проблема табулятора с виртуальным добавлением строк и отображением полос прокрутки. ⇐ Html

[Anonymous]

У меня возникла следующая проблема с Tabulator. Когда я инициализирую и добавляю сто строк данных, я прокручиваю вниз, а затем добавляю еще 500 строк с помощью кнопки, положение полосы прокрутки проблематично, и это вызывает различные проблемы, когда я использую addPos с разными значениями. Вообще говоря, положение полосы прокрутки изменится, когда я добавлю, но содержимое, отображаемое на текущей странице, не должно меняться. Следующий код воспроизводит проблему. Кто-нибудь знает, как ее исправить?

Код: Выделить всё

Tabulator Example with Add/Delete Rows



#example-table {
width: 100%;
max-width: 800px;
height: 200px;
margin: 20px auto;
}

.action-buttons {
text-align: center;
margin: 20px 0;
}

.action-buttons button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}






Add 100 Rows
Delete Selected Rows



document.addEventListener("DOMContentLoaded", function() {
var columns = [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
align: "left",
formatter: "progress"
},
{
title: "Favourite Color",
field: "color"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
];

var tableData = generateData(100);

window.table = new Tabulator("#example-table", {
addRowPos: "top",
data: tableData,
layout: "fitColumns",
columns: columns,
selectable: true,
});
});

function generateData(count) {
var data = [];
for (var i = 1; i  0) {
selectedRows.forEach(function(row) {
row.delete();
});
} else {
alert("No rows selected!");
}
}

Подробнее здесь: https://stackoverflow.com/questions/795 ... -virtually