Not possible to have position:fixed elements in combination with scroller

[Rijk van Wel]

This one is actually visible in your demo as well; when using it's not really possible to have true position: fixed elements anymore. I need this for a slide-over menu for example. This of course is due to the way the browser renders fixed items inside a transformed element, but it would be nice to have a solution for this. The workaround in the demo (hooking up an onUpdate and passing the MotionValue to 'counter-scroll') is not really elegant, especially in larger code bases where you have to pass it through multiple layers, and also doesn't exactly counter the scrolling which looks kind of wonky (can be seen in the demo controls as well). Also, because this gets its own block due to the transform, vertical alignment changes, as can be seen here:

1. https://ray-six.now.sh (in Safari)
2. Click "Our clean products"
3. Scroll down a bit
4. Notice that the menu is now vertically aligned in the middle of the page, instead of the middle of the screen.

Because of these issues, I think a good solution would be to offer an escape hatch for rendering elements outside of the scroller-motion wrapper that is transformed. What do you think?

[Brad Adams]

Hey @rijk, I've been using the library with fixed positioned elements, by placing them outside the ScrollerMotion component, something like:

<>
  <ScrollerMotion>
    ...
  </ScrollerMotion>

  <FixedElement />
</>

Does that fit your use case?

which looks kind of wonky

If I'm not mistaken that's only because in the demo I'm using window.requestAnimationFrame, to get 60fps mapping of the scroll updates. Without that the animation should be a bit more static.

[Rijk van Wel]

Haha, such a simple solution, I love it! Can I suggest you implement this for the controls in the demo as well? It works better and might help people with the same question in the future.

[Brad Adams]

Thanks for the input @rijk, I was hesitant on whether to include it in the demo funnily enough, but I think you're right.

That effect would be more suitable for some parallax elements for example, rather than for a fixed toolbar 😅 🤦 .

[Rijk van Wel]

By the way, for anyone coming across this issue in the future, a simple + elegant way to use this solution if for some reason (e.g. data requirements) it is not possible to render the component outside of the tree in React, is to use a Portal.