Видимое окно длинного списка
Условие
Список из 10 000 элементов. Рисуй только видимые: контейнер высотой 200, строка 20, прокрутка приходит пропсом scrollTop. Подложка <div class="spacer"> задаёт полную высоту, видимые строки - <div class="row" data-index>.
Что проверяют тесты
рисует только видимые
полная высота подложки
окно сдвигается при прокрутке
не выходит за границы
Как подойти
Три составляющие: подложка полной высоты ради корректной полосы прокрутки, окно видимых индексов и смещение блока. Буфер в пару строк сверху и снизу убирает мигание при быстрой прокрутке. transform вместо top - потому что он не вызывает пересчёт раскладки. Что назвать вслух как следующий шаг: строки переменной высоты с измерением и кешем позиций, горизонтальная виртуализация, готовые библиотеки.
Подсказки: 3
- Первый видимый индекс - floor(scrollTop / rowHeight).
- Подложка нужна, чтобы полоса прокрутки соответствовала полной длине списка.
- Видимый блок надо сдвинуть на start * rowHeight, иначе строки окажутся вверху.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.