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 }) {
-
-
+
+
{visibleItems.map(item => (
{item.name} @@ -32,7 +36,10 @@ function VirtualList({ items, itemHeight=50, containerHeight=400 }) {
) } +/* + +*/ function App() { const generatedBigDataSet = () => { return Array.from({ length: 100 }, (_, index) => ({ diff --git a/src/App.scss b/src/App.scss index dec8c33..bae0684 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,7 +1,7 @@ .container { - display: flex; +/* display: flex; flex-direction: column; - flex-wrap: nowrap; + flex-wrap: nowrap;*/ overflow: auto; border: 1px solid black; }