Fixed position children block scroll events from reaching container
malerba118 opened this issue · comments
Fixed position children seem to allow scroll events to propagate to the body, but not intermediate ancestors.
This is problematic because scrollex doesn't permit body scrolling, it forces you to use a scroll container which renders a div with overflow set to auto.
At the moment I've found a few potential workarounds for fixed position content blocking scroll events:
pointer-events: none
allows scroll events through to the scroll container buttt, of course it makes the fixed position content completely non-interactive which is a big caveat- sometimes you can achieve an effect similar to fixed positioning by using a sticky position parent/absolute position child. Imagine both taking up the full viewport. This creates a similar effect where for some period of time the content will remain static on the screen, despite the fact that you're scrolling.
- this is a weird one, but maybe the best solution: it appears that if you put
clipPath="inset(0 0 0 0)"
on a parent of fixed position element, for some reason it allows scroll events to propagate up to ancestors while still allowing the fixed position content to be interactive (eg: https://codesandbox.io/s/scrollex-product-demo-6omvyq?file=/src/App.tsx)
by using clipPath, seems that i was able to fix this!