Spaces:
Running
Running
File size: 2,346 Bytes
cc90b15 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html>
<html>
<head>
<title>Virtual List Implementation</title>
</head>
<body>
<script>
class VirtualList {
constructor(options) {
this.container = options.w;
this.itemHeight = options.itemHeight;
this.totalRows = options.totalRows;
this.generatorFn = options.generatorFn;
this.visibleItems = Math.ceil(this.container.clientHeight / this.itemHeight);
this.startIndex = 0;
this.content = document.createElement('div');
this.content.style.position = 'relative';
this.content.style.height = `${this.totalRows() * this.itemHeight}px`;
this.container.appendChild(this.content);
this.renderChunk(this.startIndex);
this.container.addEventListener('scroll', () => {
const scrollTop = this.container.scrollTop;
const newStartIndex = Math.floor(scrollTop / this.itemHeight);
if (newStartIndex !== this.startIndex) {
this.startIndex = newStartIndex;
this.renderChunk(this.startIndex);
}
});
}
renderChunk(startIndex) {
// Clear existing content
while (this.content.firstChild) {
this.content.removeChild(this.content.firstChild);
}
// Add new content
const endIndex = Math.min(startIndex + this.visibleItems + 2, this.totalRows());
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.style.position = 'absolute';
item.style.top = `${i * this.itemHeight}px`;
item.style.width = '100%';
const content = this.generatorFn(i);
item.appendChild(content);
this.content.appendChild(item);
}
}
}
// Make available globally
window.VirtualList = VirtualList;
</script>
</body>
</html> |