From 0617baa712bd6a6648404e3687f66eee27fea08e Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Mon, 25 Dec 2023 00:48:10 +0100
Subject: [PATCH 1/3] Handle scrollbar width

In case there are more elements that can be displayed,
a scrollbar will be shown. Its width must be added to
the overflowed div to ensure that it does not overlap
with the items.

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 src/VirtualTable.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/VirtualTable.tsx b/src/VirtualTable.tsx
index fef4cbc..f96dddb 100644
--- a/src/VirtualTable.tsx
+++ b/src/VirtualTable.tsx
@@ -69,7 +69,7 @@ function get_initial_state<T>(): State<T> {
             y: 0,
             height: 0,
             width: 0,
-        }
+        },
     }
 }
 function calculatePageCount(pageHeight: number, itemHeight: number) {
@@ -123,6 +123,7 @@ function reducer<Type>(state: State<Type>, action: Action<Type>): State<Type> {
 export default function VirtualTable<Type>({ height, renderer, fetcher, style }: Args<Type>): JSX.Element {
     const ref = useRef(null);
     const invisible = useRef(null);
+    const scrolldiv = useRef(null);
     const [collection, setCollection] = useState<LazyPaginatedCollection<Type>>(() => new LazyPaginatedCollection<Type>(1, fetcher));
     const [state, dispatch] = useReducer(reducer<Type>, get_initial_state<Type>());
 
@@ -256,6 +257,10 @@ export default function VirtualTable<Type>({ height, renderer, fetcher, style }:
         }
     });
 
+    let scrollbarWidth = 0;
+    if (scrolldiv && scrolldiv.current) {
+        scrollbarWidth = scrolldiv.current.offsetWidth - scrolldiv.current.children[0].offsetWidth;
+    }
 
     return (
         <Container>
@@ -279,11 +284,12 @@ export default function VirtualTable<Type>({ height, renderer, fetcher, style }:
                         {state.itemHeight !== 0 && generate(state.offset, slideItems(state.offset, state.page))}
                     </div>
                     <div
+                        ref={scrolldiv}
                         className='overflow-scroll position-absolute'
                         style={{
                             top: state.rect.y,
                             left: state.rect.x,
-                            width: state.rect.width,
+                            width: state.rect.width + scrollbarWidth,
                             height: state.rect.height,
                         }}
                         onMouseMove={(e) => {

From 21b94a745d09926e664bc79f1f154b383c5ba8c6 Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Mon, 25 Dec 2023 00:49:13 +0100
Subject: [PATCH 2/3] Display scroll bars only if the content is overflowing

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 src/VirtualTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/VirtualTable.tsx b/src/VirtualTable.tsx
index f96dddb..39e8f10 100644
--- a/src/VirtualTable.tsx
+++ b/src/VirtualTable.tsx
@@ -285,7 +285,7 @@ export default function VirtualTable<Type>({ height, renderer, fetcher, style }:
                     </div>
                     <div
                         ref={scrolldiv}
-                        className='overflow-scroll position-absolute'
+                        className='overflow-auto position-absolute'
                         style={{
                             top: state.rect.y,
                             left: state.rect.x,

From 3062e589cda9f3e84fd6ceefc2247df57e8ad04f Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Mon, 25 Dec 2023 00:50:01 +0100
Subject: [PATCH 3/3] Bumped version to 1.1.8

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 556b542..84fd00d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@krjakbrjak/virtualtable",
-    "version": "1.1.7",
+    "version": "1.1.8",
     "description": "",
     "repository": {
         "type": "git",