[useScrollTrigger] Fix out of sync trigger (#20678)

mui · Apr 22, 2020 · 48134ab · 48134ab
1 parent 4bd2f85
commit 48134ab
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js b/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
 
-function getScrollY(ref) {
-  return ref.pageYOffset !== undefined ? ref.pageYOffset : ref.scrollTop;
-}
-
-function defaultTrigger(event, store, options) {
-  const { disableHysteresis = false, threshold = 100 } = options;
+function defaultTrigger(store, options) {
+  const { disableHysteresis = false, threshold = 100, target } = options;
   const previous = store.current;
-  store.current = event ? getScrollY(event.currentTarget) : previous;
+
+  if (target) {
+    // Get vertical scroll
+    store.current = target.pageYOffset !== undefined ? target.pageYOffset : target.scrollTop;
+  }
 
   if (!disableHysteresis && previous !== undefined) {
     if (store.current < previous) {
@@ -23,14 +23,14 @@ const defaultTarget = typeof window !== 'undefined' ? window : null;
 export default function useScrollTrigger(options = {}) {
   const { getTrigger = defaultTrigger, target = defaultTarget, ...other } = options;
   const store = React.useRef();
-  const [trigger, setTrigger] = React.useState(() => getTrigger(null, store, other));
+  const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
 
   React.useEffect(() => {
-    const handleScroll = (event) => {
-      setTrigger(getTrigger(event, store, other));
+    const handleScroll = () => {
+      setTrigger(getTrigger(store, { target, ...other }));
     };
 
-    handleScroll(null); // Re-evaluate trigger when dependencies change
+    handleScroll(); // Re-evaluate trigger when dependencies change
     target.addEventListener('scroll', handleScroll);
     return () => {
       target.removeEventListener('scroll', handleScroll);

diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js
@@ -82,6 +82,11 @@ async function getSizeLimitBundles() {
       webpack: true,
       path: 'packages/material-ui/build/esm/useMediaQuery/index.js',
     },
+    {
+      name: '@material-ui/core/useScrollTrigger',
+      webpack: true,
+      path: 'packages/material-ui/build/esm/useScrollTrigger/index.js',
+    },
   ];
 }