diff --git a/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js b/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js index 79e0e331c69cc1..d88baaf06ba1c6 100644 --- 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 index 787b16ba043ca4..eecbc1d081ff32 100644 --- 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', + }, ]; }