From 50becd2dca1f6a5d8edf2a6acaf4e7acd94358de Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Sun, 17 May 2026 13:01:30 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D1=88=20=D1=81=D0=BA=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx  | 13 ++++++++++---
 src/App.scss |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

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 }) {
         <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) => ({
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;
 }