Виртуально-прокручивание работает с нативной прокруткой, но не с Simplebar-появляется, но список не будет прокручивать ⇐ Javascript

[Anonymous]

Я пытаюсь добавить виртуальную прокрутку в длинный список, который использует Simplebar для пользовательского стиля.
С нативной половой прокручиванием, которую работает техника: я создаю очень высокий невидимый спейсер (.sizer), чтобы придать прокрутке с полным диапазоном, а затем абсолютно поставлен только видимый строки внутри скручивания. Элементы.
Нативная версия (работает):





const ROW_HEIGHT = 30;
const TOTAL_ITEMS = 1_000_000;

const viewport = document.getElementById('viewport');
function render () {
const scrollTop = viewport.scrollTop;
/* …compute first/last, paint rows… */
}
viewport.addEventListener('scroll', render);
render();


версия Simplebar (появляются ряды, без прокрутки ):




const sb = new SimpleBar(document.getElementById('viewport'));
const scrollEl = sb.getScrollElement(); // .simplebar-content-wrapper
function render () {
const scrollTop = scrollEl.scrollTop;
/* …compute first/last, paint rows inside sb.getContentElement() … */
}
scrollEl.addEventListener('scroll', render);
render();

< /code>
Пространство (.sizer) находится внутри элемента содержимого Simplebar, но перетаскивание большого пальца перемещает только несколько пикселей, и список никогда не достигает нижней.



Virtual scroll + SimpleBar




#viewport {
height: 400px;
width: 300px;
border: 1px solid #444;
/* SimpleBar will turn this into a scrollable widget */
}

/* invisible spacer that gives the scrollbar its full range */
.sizer {
height: calc(30px * 1000000);
}

/* rows are absolutely positioned inside the simplebar-content area */
.row {
position: absolute;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}




Virtual list (1 000 000 rows) with SimpleBar







const ROW_HEIGHT = 30;
const TOTAL_ITEMS = 1_000_000;
const BUFFER = 5;

// SimpleBar gives us the *real* scrollable wrapper
const sb = new SimpleBar(document.getElementById('viewport'));
const scrollEl = sb.getScrollElement(); // the

function render() {
const scrollTop = scrollEl.scrollTop;
const first = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - BUFFER);
const last = Math.min(TOTAL_ITEMS - 1,
Math.ceil((scrollTop + scrollEl.clientHeight) / ROW_HEIGHT) + BUFFER);

/* clear old rows */
sb.getContentElement().querySelectorAll('.row').forEach(r => r.remove());

/* add visible rows */
for (let i = first; i

Подробнее здесь: https://stackoverflow.com/questions/797 ... ows-appear