diff --git a/packages/donate-button-v4/src/loaders/Widgetloader.tsx b/packages/donate-button-v4/src/loaders/Widgetloader.tsx index eaafe104..7bc72910 100644 --- a/packages/donate-button-v4/src/loaders/Widgetloader.tsx +++ b/packages/donate-button-v4/src/loaders/Widgetloader.tsx @@ -1,17 +1,9 @@ +import {useEffect} from 'preact/hooks'; import {ContextProvider} from 'src/components/widget/context'; import Widget from 'src/components/widget/index'; import {WidgetConfig} from 'src/components/widget/types/WidgetConfig'; -let originalOverflow: string; -const getOriginalOverflow = () => { - const body = document.querySelector('body'); - - if (!originalOverflow) { - originalOverflow = body?.style.overflow ? body.style.overflow : 'unset'; - } - - return originalOverflow; -}; +const originalOverflow = document.querySelector('body')?.style.overflow; const addOverflowToBody = () => { const body = document.querySelector('body'); @@ -22,9 +14,14 @@ const addOverflowToBody = () => { const removeOverflowFromBody = () => { const body = document.querySelector('body'); - const overflow = getOriginalOverflow(); + if (body) { - body.style.overflow = overflow; + if (originalOverflow) { + body.style.overflow = originalOverflow; + return; + } + + body.style.removeProperty('overflow'); } }; @@ -35,6 +32,20 @@ interface WidgetLoaderProps { export const WidgetLoader = ({options = {}, hide}: WidgetLoaderProps) => { removeOverflowFromBody(); + + useEffect(() => { + function onPopState() { + hide(); + removeOverflowFromBody(); + } + + window.addEventListener('popstate', onPopState); + + return () => { + window.removeEventListener('popstate', onPopState); + }; + }, []); // eslint-disable-line react-hooks/exhaustive-deps + if (!options.show) { // Not showing return null;