From 1b29b2c03c0a1b066873067413447560ef1c4cb7 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bsunderhus@microsoft.com>
Date: Wed, 6 Oct 2021 14:52:33 +0200
Subject: [PATCH 1/4] Moves onScroll method on ScrollablePane from root to
 container

---
 .../ScrollablePane/ScrollablePane.base.tsx    | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 1ef86f84bda53..4d631bd758412 100644
--- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -187,7 +187,7 @@ export class ScrollablePaneBase
   }
 
   public render(): JSX.Element {
-    const { className, scrollContainerFocus, scrollContainerAriaLabel, theme, styles } = this.props;
+    const { className, scrollContainerFocus, scrollContainerAriaLabel, theme, styles, onScroll } = this.props;
     const { stickyTopHeight, stickyBottomHeight } = this.state;
     const classNames = getClassNames(styles!, {
       theme: theme!,
@@ -200,11 +200,26 @@ export class ScrollablePaneBase
           role: 'group',
           tabIndex: 0,
           'aria-label': scrollContainerAriaLabel,
+          onScroll,
         }
-      : {};
+      : {
+          onScroll,
+        };
 
     return (
-      <div {...getNativeProps(this.props, divProperties)} ref={this._root} className={classNames.root}>
+      <div
+        {...getNativeProps(
+          {
+            ...this.props,
+            // on v17 onScroll is not being invoked on root element,
+            //  as a fix this method will be provided to container element
+            onScroll: undefined,
+          },
+          divProperties,
+        )}
+        ref={this._root}
+        className={classNames.root}
+      >
         <div
           ref={this._stickyAboveRef}
           className={classNames.stickyAbove}

From 6eef3c35eda47b8e9604a73540124930c227bf6d Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bsunderhus@microsoft.com>
Date: Wed, 6 Oct 2021 14:54:04 +0200
Subject: [PATCH 2/4] Change files

---
 ...luentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json

diff --git a/change/@fluentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json b/change/@fluentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json
new file mode 100644
index 0000000000000..c7a082f987d3a
--- /dev/null
+++ b/change/@fluentui-react-73d7be27-0748-4f29-b659-db242b6ef7d0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Moves onScroll method on ScrollablePane from root to container",
+  "packageName": "@fluentui/react",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 58432456142c0cb14a7e40ff41b962918ad0aab6 Mon Sep 17 00:00:00 2001
From: KHMakoto <Humberto.Morimoto@microsoft.com>
Date: Tue, 19 Apr 2022 16:52:01 -0500
Subject: [PATCH 3/4] Using excludedPropNames instead of undefining the
 onScroll prop.

---
 .../src/components/ScrollablePane/ScrollablePane.base.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 4d631bd758412..0b86dc6ce81b1 100644
--- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -211,11 +211,13 @@ export class ScrollablePaneBase
         {...getNativeProps(
           {
             ...this.props,
-            // on v17 onScroll is not being invoked on root element,
-            //  as a fix this method will be provided to container element
+
             onScroll: undefined,
           },
           divProperties,
+          // on React 17 onScroll is not being invoked on root element,
+          // as a fix this method will be provided to the container element
+          ['onScroll'],
         )}
         ref={this._root}
         className={classNames.root}

From 3dcc0ebb7eed9bf6c796a31cedbabb2b35cfa876 Mon Sep 17 00:00:00 2001
From: KHMakoto <Humberto.Morimoto@microsoft.com>
Date: Tue, 19 Apr 2022 16:58:13 -0500
Subject: [PATCH 4/4] Using excludedPropNames instead of undefining the
 onScroll prop.

---
 .../react/src/components/ScrollablePane/ScrollablePane.base.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 0b86dc6ce81b1..34635c30cadb7 100644
--- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -211,8 +211,6 @@ export class ScrollablePaneBase
         {...getNativeProps(
           {
             ...this.props,
-
-            onScroll: undefined,
           },
           divProperties,
           // on React 17 onScroll is not being invoked on root element,