malerba118 / scrollex

Build beautiful scroll experiences using minimal code

Home Page:https://scrollex-docs.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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!