Using scrollIntoView does not update the scroll.offset of ScrollControls

[arthurescapegit]

• three version: 0.133.1
• @react-three/fiber version: 7.0.16
• @react-three/drei version: 7.16.6
• node version: (codesandbox default)
• npm (or yarn) version: (codesandbox default)

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]

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

[psycho-baller]

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]

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]

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