search

pmndrs / drei

🥉 useful helpers for react-three-fiber
https://docs.pmnd.rs/drei
MIT License
8.25k stars 680 forks source link

Using scrollIntoView does not update the scroll.offset of ScrollControls #772

Open arthurescapegit opened 2 years ago

arthurescapegit commented 2 years ago

Problem description:

When using the scrollIntoview function to get to an element contained in ScrollControls, the content scrolls in unexpected ways, creating an buggy setup. It seems like the onScroll method inside ScrollControls.tsx is not called when using scrollIntoView, therefore the scroll.offset value is not updating, resulting in the weird behaviors.

Relevant code:

Here is a sandbox to see the problem: ScrollControls with minimap scrollintoview bug

Suggested solution:

By looking around in the ScrollControls.tsx, it seems clear that onScroll (line 144) is not called when using scrollintoview. I tried creating custom events to fire when a link is clicked such as: scroll.el.dispatchevent(new customevent('scroll')), but the behavior seems to still screw up... not exactly sure how to go about this. I would imagine that a method one can call to scrollTo somewhere would be a good addition to the awesome ScrollControls!

psycho-baller commented 1 year ago

hey @arthurescapegit Facing the same problem as you did. Did you find any solution for the lack of a scrollTo func?

psycho-baller commented 1 year ago

I kinda found a workaround for this issue. you can find the code here. I made a tutorial video that explains the code here

RobeSantoro commented 1 year ago

https://codesandbox.io/s/scrollcontrols-with-minimap-scrollintoview-bug-forked-fqyi1y?file=/src/index.js

Or create a state store with valtio like in this example:

https://codesandbox.io/s/ioxywi

RobeSantoro commented 1 year ago

Check this lib, too: https://github.com/14islands/r3f-scroll-rig/tree/master