From b72610b132b254a14d84cd579b502ca39b81b090 Mon Sep 17 00:00:00 2001
From: Dmytro Soldatov <CyberDex@users.noreply.github.com>
Date: Tue, 30 Jul 2024 15:12:50 +0300
Subject: [PATCH] 177 [Feature request]: Add scroll event listener to ScrollBox
 (#188)

* Feat: Add scroll event listener to ScrollBox (#187)

* Feat: Add scroll event listener to ScrollBox
---
 src/ScrollBox.ts                              | 19 +++++++++++++++++++
 .../scrollBox/ScrollBoxGraphics.stories.ts    |  6 ++++++
 2 files changed, 25 insertions(+)

diff --git a/src/ScrollBox.ts b/src/ScrollBox.ts
index 0ed54706..faf7a50d 100644
--- a/src/ScrollBox.ts
+++ b/src/ScrollBox.ts
@@ -84,6 +84,7 @@ export class ScrollBox extends Container
     protected lastScrollY!: number | null;
     protected proximityCheckFrameCounter = 0;
     public onProximityChange = new Signal<(data: ProximityEventData) => void>();
+    public onScroll: Signal<(value: number) => void> = new Signal();
 
     /**
      * @param options
@@ -564,6 +565,9 @@ export class ScrollBox extends Container
 
     protected onMouseScroll(event: WheelEvent): void
     {
+        const isVertical: boolean = this.options.type !== 'horizontal';
+        const oldScrollPos = isVertical ? this.scrollY : this.scrollX;
+
         if (!this.isOver && !this.options.globalScroll) return;
 
         this.renderAllItems();
@@ -607,6 +611,13 @@ export class ScrollBox extends Container
         }
 
         this.stopRenderHiddenItems();
+
+
+        const newScrollPos = isVertical ? this.scrollY : this.scrollX;
+
+        if (newScrollPos !== oldScrollPos) {
+            this.onScroll?.emit(newScrollPos);
+        }
     }
 
     /** Makes it scroll down to the last element. */
@@ -869,4 +880,12 @@ export class ScrollBox extends Container
             item.children.forEach((child) => this.revertClick(child));
         }
     }
+
+    get scrollHeight(): number {
+        return this.list.height;
+    }
+
+    get scrollWidth(): number {
+        return this.list.width;
+    }
 }
diff --git a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts
index dc307361..6ab0045d 100644
--- a/src/stories/scrollBox/ScrollBoxGraphics.stories.ts
+++ b/src/stories/scrollBox/ScrollBoxGraphics.stories.ts
@@ -87,6 +87,12 @@ export const UseGraphics: StoryFn = ({
 
     scrollBox.addItems(items);
 
+    scrollBox.onScroll.connect((scroll) => console.log({
+        scroll,
+        scrollHeight: scrollBox.scrollHeight,
+        scrollWidth: scrollBox.scrollWidth
+    }));
+
     view.addChild(scrollBox);
 
     return {