Change files (#5248)

microsoft · Oct 4, 2021 · 5f6c838 · 5f6c838
1 parent a8e6ee6
commit 5f6c838
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/change/@microsoft-fast-foundation-790197e1-feb0-4dea-b82e-255e7125e42a.json b/change/@microsoft-fast-foundation-790197e1-feb0-4dea-b82e-255e7125e42a.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add scroll events to horizontal-scroll component",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "robarb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
@@ -143,8 +143,20 @@ export class HorizontalScroll extends FoundationElement {
      * Scrolling state
      * @internal
      */
+    @observable
     private scrolling: boolean = false;
 
+    /**
+     * Firing scrollstart and scrollend events
+     * @internal
+     */
+    private scrollingChanged() {
+        if (this.scrollContainer) {
+            const event = this.scrolling == true ? "scrollstart" : "scrollend";
+            this.$emit(event, this.scrollContainer.scrollLeft);
+        }
+    }
+
     /**
      * Detects if the component has been resized
      * @internal
@@ -404,14 +416,15 @@ export class HorizontalScroll extends FoundationElement {
             return;
         }
 
+        this.scrolling = true;
+
         if (this.speed < 1) {
             this.scrollContainer.style.scrollBehavior = "auto";
             this.scrollContainer.scrollLeft = newPosition;
+            this.scrolling = false;
             return;
         }
 
-        this.scrolling = true;
-
         const steps: number[] = [];
         const direction: number = position < newPosition ? 1 : -1;
         const scrollDistance: number = Math.abs(newPosition - position);