Location>code7788 >text

Native JS implements virtual lists (not using front-end frameworks such as Vue, React, etc.)

Popularity:394 ℃/2025-03-19 10:46:34
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Native JavaScript virtual list implementation</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .list-container { position: relative; height: 400px; overflow: auto; border: 1px solid #ccc; margin: 20px auto; width: 80%; } .list-phantom { position: absolute; left: 0; top: 0; right: 0; z-index: -1; } .list-content { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; } .list-item { padding: 10px; border-bottom: 1px solid #eee; color: #666; } .list-item:hover { background-color: #f5f5f5; } </style> </head> <body> <h1 style="text-align: center; margin: 20px 0;">Native JavaScript virtual list</h1> <div id="virtualList" class="list-container"> <div class="list-phantom"></div> <div class="list-content"></div> </div> <script> class VirtualList { constructor(options) { this.container = ; this.data = || []; this.itemHeight = || 50; this.bufferSize = || 5; this.phantom = this.('.list-phantom'); this.content = this.('.list-content'); this.startIndex = 0; this.endIndex = 0; this.scrollTop = 0; this.init(); } init() { //Set the height of the placeholder this. = this. * this.itemHeight + 'px'; //Listen to scroll events this.('scroll', this.(this)); //Initial rendering this.updateVisibleItems(); } handleScroll() { //Get the current scroll position this.scrollTop = this.; //Update visible items this.updateVisibleItems(); } updateVisibleItems() { //Calculate the start and end indexes this.startIndex = (this.scrollTop / this.itemHeight); this.endIndex = this.startIndex + (this. / this.itemHeight); //Add a buffer this.startIndex = (0, this.startIndex - this.bufferSize); this.endIndex = (this., this.endIndex + this.bufferSize); //Calculate offset const offsetY = this.startIndex * this.itemHeight; //Set the offset of the content container this. = `translateY(${offsetY}px)`; //Render visible items this.renderItems(); } renderItems() { //Clear the content container this. = ''; //Render visible items for (let i = this.startIndex; i < this.endIndex; i++) { const item = ('div'); = 'list-item'; = this.renderItemContent(this.data[i], i); = this.itemHeight + 'px'; this.(item); } } renderItemContent(item, index) { return `<div>Index: ${index}, Content: ${item}</div>`; } } //Generate test data const data = ({ length: 10000 }, (_, i) =>`List Item ${i+ 1}`); //Initialize the virtual list const virtualList = new VirtualList({ container: ('virtualList'), data: data, itemHeight: 50, bufferSize: 10 }); </script> </body> </html>