Latihan 1: Virtual Scrolling — Performance

Latihan 1 dari materi Virtual Scrolling di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi function getVisibleItems(scrollTop, containerHeight, itemHeight, totalItems) yang menghitung baris mana yang perlu dirender.

startIndex: Math.floor(scrollTop / itemHeight).
Banyak baris yang dirender: Math.ceil(containerHeight / itemHeight) + 1 (1 baris cadangan).
endIndex: startIndex ditambah banyak baris itu, tapi gak boleh lebih dari totalItems. Pakai Math.min.
offsetY: startIndex * itemHeight.
visibleCount: endIndex - startIndex.
Return satu object dengan key persis ini, dengan urutan ini: startIndex, endIndex, offsetY, visibleCount.

Yang dinilai nilai kembaliannya:

getVisibleItems(0, 500, 50, 1000) harus { startIndex: 0, endIndex: 11, offsetY: 0, visibleCount: 11 }
getVisibleItems(2500, 500, 50, 1000) harus { startIndex: 50, endIndex: 61, offsetY: 2500, visibleCount: 11 }
ada juga cek tersembunyi di ujung list: getVisibleItems(49500, 500, 50, 1000) harus { startIndex: 990, endIndex: 1000, offsetY: 49500, visibleCount: 10 }

Dua baris console.log di kode awal biarkan saja.

Hint

Mulai dari baris pertama yang kelihatan: berapa baris setinggi itemHeight yang sudah tergulung ke atas sejauh scrollTop? Lalu hitung berapa baris yang muat di kotak, tambah satu cadangan.
const startIndex = Math.floor(scrollTop / itemHeight); const rows = Math.ceil(containerHeight / itemHeight) + 1; lalu endIndex = Math.min(startIndex + rows, totalItems).
return { startIndex, endIndex, offsetY: startIndex * itemHeight, visibleCount: endIndex - startIndex };

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Virtual Scrolling — Performance

Hint

Memperbarui Aplikasi