虚拟长列表

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .list-container {
            height: 400px;
            overflow-y: auto;
            border: 1px solid #ccc;
        }
    </style>
<div class="list-container">
        <div id="list" style="position: relative">
        </div>

    </div>
 <script>
        const totalItems = 1000; // 定义总项目数
        const itemHeight = 50;  // 每个列表项的高度

        // 获取列表容器元素
        const container = document.querySelector('.list-container');
        const list = document.getElementById('list');

        list.style.height = `${totalItems * itemHeight}px`; // 计算并设置列表总高度

        function renderList(start, end) { // 渲染列表的函数
            list.innerHTML = ''; // 清空列表内容

            for (let i = start; i <= end; i++) { // 循环创建可见范围内的项目
                // 对于每个列表项
                const item = document.createElement("div");
                item.style.position = "absolute"; // 设置为绝对定位
                item.style.top = `${i * itemHeight}px`; // 设置顶部位置
                item.style.height = `${itemHeight}px`; // 设置高度
                item.style.width = "100%"; // 设置宽度
                item.textContent = `Item ${i + 1}`; // 设置文本内容
                list.appendChild(item); // 添加到列表中
            }
        }

        function handleScroll() { // 处理滚动事件的函数

            const scrollTop = container.scrollTop; // 获取容器的垂直滚动位置

            const start = Math.floor(scrollTop / itemHeight); // 计算起始索引
            const end = Math.min(
                start + Math.ceil(container.clientHeight / itemHeight), // 计算结束索引
                totalItems - 1
            );
            renderList(start, end); // 渲染列表
        }

        handleScroll(); // 初始渲染列表

        document.querySelector('.list-container').addEventListener('scroll', handleScroll); // 为列表容器添加滚动事件监听

    </script>