KP-C

Kevin Powell - Community•2y ago•

1 reply

thethingisback

Menu overlay 'onClick()' & retain scrolling for content underneath (pointer-events?)

I've attached the component, as well as my

app.js

app.js

, to show that it's being invoked outside of the

<Routes/>

<Routes/>

element, so it appears on top of all other components/pages/routes.

This is where the problem comes in however, since, in the

appNav

appNav

component itself, I'm applying, conditionally, an overlay which, when active, encompasses the entire width and height of the container.

The overlay has an '

onClick()

onClick()

' which triggers the state change in '

isMenuOpen

isMenuOpen

', as a secondary way to close the menu, by clicking the overlay background essentially.


I noticed, when this overlay is visible, I'm of course unable to affect anything underneath the overlay with my pointer, so I cannot scroll that content while the overlay is active..

My goal is to maintain the

onClick()

onClick()

toggling, but somehow also allow the user to scroll (but not interact with) the content underneath the

appNav

appNav

's overlay element.

The "solution" I've had so far is using a state-added class which changes the '

pointer-events

pointer-events

' CSS property of the overlay. Ultimately this approach won't work though, since I'm still trying to both have and not have pointer events on the same element simultaneously. I can only ever have scrolling without clickability or vice versa.



What would be a better approach to this?

(CSS is 3rd attmt/pic)

appNav.js2.75KB

app.js.js1.15KB