Наш скролинг

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 }) {
         <div ref={containerRef} className="container" style={{
                 height: containerHeight
             }} onScroll={handleScroll}>
-            <div style={{ height:totalHeight, position: 'relative' }}>
-                <div style={{position:'absolute', top: 0, left:0, right: 0}}>
+            <div style={{ height:totalHeight }}>
+                <div style={{position:'relative', left:0, right: 0}}>                
                     {visibleItems.map(item => (
                         <div className="item" key={item.id} style={{ height: itemHeight }}>
                             {item.name}
@@ -32,7 +36,10 @@ function VirtualList({ items, itemHeight=50, containerHeight=400 }) {
         </div>
     )
 }
+/*
 
+                    
+*/
 function App() {
     const generatedBigDataSet = () => {
         return Array.from({ length: 100 }, (_, index) => ({

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;
 }