<p>虚拟滚动通过只渲染可视区域内的数据来提升性能，其核心是根据滚动位置动态计算需渲染的数据范围。1. 计算可视区域数据范围：基于scrolltop、itemheight和visibleheight，得出startindex = math.floor(scrolltop / itemheight)，endindex = math.min(startindex + math.ceil(visibleheight / itemheight), data.Length)。2. 处理滚动条高度：设置容器高度为totalheight = data.length * itemheight，以模拟完整列表的滚动高度。3. 优化滚动性能：使用节流函数throttle限制滚动事件触发频率，如throttledscrollhandler = throttle(handlescroll, 50)。4. 处理不同高度数据项：维护itemheights和cumulativeheights数组，通过二分查找findstartindex确定起始索引，并累加高度计算endindex。5. 处理占位元素：通过绝对定位或外层容器的高度占位，确保滚动条正常显示。6. react中实现：使用usestate管理startindex，useref绑定容器，监听scroll事件更新渲染范围，结合absolute定位渲染可视项，并设置总高度保持滚动条比例，最终实现高效虚拟滚动。</p>
JavaScript数组实现虚拟滚动，本质上是只渲染可视区域内的数据，而非全部数据，从而提高性能。核心在于根据滚动位置动态计算需要渲染的数据范围。
解决方案
虚拟滚动主要通过监听滚动事件，计算可视区域内的起始索引和结束索引，然后从完整的数据集中截取相应的数据进行渲染。这个过程需要精确计算，并且要考虑到滚动条的高度和数据项的高度。
立即学习“Java免费学习笔记（深入）”；
如何计算可视区域的数据范围？
首先，你需要知道每个数据项的高度（假设所有项高度一致），以及可视区域的高度。然后，根据滚动条的scrollTop值，就可以计算出可视区域的起始索引。
const itemHeight = 30; // 每个数据项的高度 const visibleHeight = 600; // 可视区域的高度 const scrollTop = // 获取滚动条的scrollTop值 const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.min(startIndex + Math.ceil(visibleHeight / itemHeight), data.length); //data是你的完整数据
计算出startIndex和endIndex后，就可以使用
data.slice(startIndex, endIndex)
来获取需要渲染的数据。
如何处理滚动条的高度？
虚拟滚动需要模拟一个完整的滚动条，即使只渲染了部分数据。这通常通过设置容器的高度来实现，容器的高度等于数据总数乘以每个数据项的高度。
const totalHeight = data.length * itemHeight; // 设置容器的style.height = totalHeight + 'px';
如何优化滚动性能？
频繁的滚动事件触发会导致大量的计算和渲染，影响性能。可以使用节流或防抖技术来优化滚动事件的处理。
function throttle(func, delay) { let timeoutId; let lastExecTime = 0; return function(...args) { const context = this; const currentTime = new Date().getTime(); if (!timeoutId) { if (currentTime - lastExecTime >= delay) { func.apply(context, args); lastExecTime = currentTime; } else { timeoutId = setTimeout(() => { func.apply(context, args); lastExecTime = new Date().getTime(); timeoutId = null; }, delay - (currentTime - lastExecTime)); } } }; } const throttledScrollHandler = throttle(handleScroll, 50); // 50ms节流 // 监听滚动事件，调用throttledScrollHandler
如何处理不同高度的数据项？
如果数据项的高度不一致，需要维护一个高度缓存，记录每个数据项的高度。在计算可视区域的数据范围时，需要遍历高度缓存，累加高度，直到达到scrollTop值。 这会增加计算的复杂度，但能更精确地实现虚拟滚动。
const itemHeights = []; // 存储每个数据项的高度 let cumulativeHeights = [0]; // 存储累计高度，第一个元素为0 function calculateCumulativeHeights() { let sum = 0; for (let i = 0; i < data.length; i++) { // 假设你可以获取到每个data[i]元素渲染后的高度，比如通过 getBoundingClientRect() const element = document.getElementById(`item-${i}`); // 假设每个item有唯一的id if(element){ itemHeights[i] = element.getBoundingClientRect().height; } else { itemHeights[i] = itemHeight; // 默认高度，或者在渲染后更新 } sum += itemHeights[i]; cumulativeHeights[i + 1] = sum; } } // 找到startIndex：二分查找cumulativeHeights中第一个大于等于scrollTop的索引 function findStartIndex(scrollTop) { let low = 0; let high = cumulativeHeights.length - 1; let bestIndex = high; // 默认值 while (low <= high) { const mid = Math.floor((low + high) / 2); if (cumulativeHeights[mid] >= scrollTop) { bestIndex = mid; high = mid - 1; } else { low = mid + 1; } } return Math.max(0, bestIndex - 1); // 确保不小于0 } // 计算endIndex：找到startIndex后，累加高度直到超出visibleHeight function calculateEndIndex(startIndex, visibleHeight) { let sum = 0; let endIndex = startIndex; for (let i = startIndex; i < data.length; i++) { sum += itemHeights[i]; if (sum > visibleHeight) { endIndex = i; break; } endIndex = i; } return Math.min(endIndex + 1, data.length); } // 滚动处理函数 function handleScroll() { const scrollTop = // 获取滚动条的scrollTop值 const startIndex = findStartIndex(scrollTop); const endIndex = calculateEndIndex(startIndex, visibleHeight); const visibleData = data.slice(startIndex, endIndex); // 渲染visibleData } // 初始化时计算累计高度 calculateCumulativeHeights();
如何处理占位元素？
为了保证滚动条的正确显示，通常需要在可视区域的上方和下方添加占位元素，用于填充未渲染的数据项。占位元素的高度等于未渲染的数据项的高度之和。
虚拟滚动在React中的实现？
在React中，可以使用
react-window
或
react-virtualized
等库来实现虚拟滚动。这些库提供了高性能的虚拟滚动组件，可以简化虚拟滚动的实现。当然，你也可以自己实现，通过state管理startIndex和endIndex，并在滚动事件中更新state。
import React, { useState, useRef, useEffect } from 'react'; const VirtualizedList = ({ data, itemHeight }) => { const [startIndex, setStartIndex] = useState(0); const containerRef = useRef(null); const visibleCount = 20; // 可视区域容纳的item数量，可以动态计算 const handleScroll = () => { if (!containerRef.current) return; const scrollTop = containerRef.current.scrollTop; const newStartIndex = Math.floor(scrollTop / itemHeight); setStartIndex(newStartIndex); }; useEffect(() => { if (containerRef.current) { containerRef.current.addEventListener('scroll', handleScroll); } return () => { if (containerRef.current) { containerRef.current.removeEventListener('scroll', handleScroll); } }; }, []); const visibleData = data.slice(startIndex, Math.min(startIndex + visibleCount, data.length)); const totalHeight = data.length * itemHeight; return ( <div ref={containerRef} style={{ height: '600px', overflowY: 'scroll' }}> <div style={{ height: totalHeight + 'px', position: 'relative' }}> {visibleData.map((item, index) => ( <div key={index} style={{ position: 'absolute', top: (startIndex + index) * itemHeight + 'px', left: 0, width: '100%', height: itemHeight + 'px', borderBottom: '1px solid #eee' }} > {item} </div> ))} </div> </div> ); }; export default VirtualizedList;
这段代码展示了React中虚拟滚动的一个基本实现，关键点在于根据滚动位置动态计算
startIndex
，并只渲染
visibleData
。
totalHeight
用于模拟完整滚动条，
position: absolute
和
top
用于定位每个渲染的item。
评论（已关闭）
评论已关闭