diff --git a/src/App.jsx b/src/App.jsx index 30c7fd5..531f9c5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,12 +3,16 @@ import './App.scss' function VirtualList({ items, itemHeight=50, containerHeight=400 }) { const containerRef = useRef(null) + //Положение большого нивидимого контейнера const [scrollTop,setScrollTop] = useState(0); + //Количество отображаемых элементов const visibleCount = Math.ceil(containerHeight / itemHeight); + //Общая высота нивидимого контейнера const totalHeight = items.length * itemHeight; + //Начало и конец подгружаемых(отображаемых) элементов const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.min(startIndex + visibleCount + 1, items.length); - + //Срез видимых элементов из общего списка const visibleItems = items.slice(startIndex,endIndex); const handleScroll = e => { @@ -20,8 +24,8 @@ function VirtualList({ items, itemHeight=50, containerHeight=400 }) {