Disabling the asscroll on menu or modal open

[victornnaji]

Currently using Asscroll on my gatsby project and everything seems to be going fine until I discovered an anomaly with the behaviour of the page when the menu is open.

Before using the library, when the menu is set to open, the page is fixed and doesn't scroll until the menu is set to close again. With Asscroll, when the menu is opened, the page would still scroll since the fixed position no longer works inside of the asscroll container.

I shared the isOpen state via context across the page and used ternary where I instantiated the asscroll library as so

isOpen? asscroll.disable() : asscroll.enable()

The disable never seems to work unless I use it without the conditionals.

How else can I fix this?

[ashthornton]

Hi @Nnaji-Victor, this one will be hard to debug without seeing the problem myself, is there a way you can create a reduced working demo on Codepen for example, or share more of your code?

The disable never seems to work unless I use it without the conditionals.

Does this mean disabling does what it is supposed to if you just call it outside the conditional?

Also, you should need to call asscroll.enable(true) when re-enabling as the first parameter controls the restoration of the scroll position you were at when you called .disable()

[victornnaji]

I made this quick demo to demonstrate the issue I am currently facing https://ikunw.sse.codesandbox.io/

The sandbox is https://codesandbox.io/s/xenodochial-brahmagupta-ikunw

[ashthornton]

I can't see asscroll.disable() being called anywhere. You need to call this to prevent the page from scrolling.

[victornnaji]

Yes. I mean, I only need the asscroll.disable() when the menu is open and then enabled when the menu is closed.

I have updated the layout.js to include this conditional - open ? asscroll.disable(): asscroll.enable();

the issue still persisted.

Take a look again at the sandbox. https://codesandbox.io/s/xenodochial-brahmagupta-ikunw?file=/src/components/layout.js:994-1043

[ashthornton]

I'm not that familiar with React, but won't that just check if open is true/false when first loading the page? It's not being called each time open changes.

I'm unable to make changes to the codesandbox without it forking my own version, which can't run because of errors.

Can you share an editable version?

[victornnaji]

The conditional is inside a useEffect where open is passed as a dependency meaning that it will always run when there is a change in open.

I can invite you to edit it without having to run install. I will need your email to do that.

[ashthornton]

Are you able to invite using just my username? ashthornton

[ashthornton]

I see what the issue is - the useEffect callback is being run every time the button is pressed, so you're making new instances of ASScroll every time. You need to run all of that code just once, then run asscroll.enable/disable during the effect callback.

[victornnaji]

Thank you for your assistance. Now I know what the problem is However, Instantiating ASScroll outside a useEffect will trigger an error so I will take some time to find the best way to fix it.

[ashthornton]

Someone had a similar issue I believe: https://github.com/ashthornton/asscroll/issues/18

This might help: https://www.gatsbyjs.com/docs/debugging-html-builds/#how-to-check-if-window-is-defined