overflow : "hidden" remain trough view even if react-fullpage is not included in them
Description
I'm using react-fullpage in my Home component ONLY, but when i change to a different view (using react-router) the overflow: "hidden" remains on my body tag and it makes my views not scrollable. If i reload the view manually (by other pressing the reload button or F5) it works and remove the overflow : "hidden" .
My react-router is not wrapped by the reactfullpage.js wrapper, only my home component is wrapped by it.
Link to isolated reproduction with no external CSS / JS
[Ideally in codesandbox.io, links to personal websites won't be reviewed unless isolated. Reported issues without a reproduction might get closed.]
Steps to reproduce it
- Use react-fullpage in what ever page component
- Switch page
- overflow : hidden remains on the body tag...
I even tried
React.useEffect(() => { return function cleanup(){ console.log("cleanup ") document.body.style.overflowY = "auto !important"; document.body.style.overflowX = "auto !important"; } }, [])
but it doesnt work... (I tried changing background inside this cleanup function and it does work.)
Versions
I have the latest version of React and React-fullpage
Can you please provide an isolated reproduction in Codesandbox with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.
Perhaps you might find useful to read my article regarding how to create isolated reproductions.
The issue is pretty straight forward to be honest, you just need a react-router-dom with two views, one with react-fullpage.js & one with enough element inside to trigger a scrollbar. I'm using your library in production and i'm overflowed with issues from my users because it disable scrolling on others views when you navigate from Home page (with react full page) to any other view. I managed to fix it by adding overflow: auto on EVERY other view...
The issue is pretty straight forward to be honest, you just need a react-router-dom with two views, one with react-fullpage.js & one with enough element inside to trigger a scrollbar.
Then it seems quite straight forward to create an isolated reproduction :) Once we have it we will be able to work on your issue much faster.
Let us know when you have it.
So far, I can only recommend you to use fullpage_api.destroy('all') when you leave a fullpage page and move into a non fullpage one.
I never did a code sandbox and i have honestly no time to do so, I will come back when i have some spare time. So far I fixed it by using some styling... Thanks anyway
No problem! Let us know when you do so.