ScrollArea with scrollIntoView hook

[formal sonnet]

Hello guys, im trying to use useScrollIntoView hook to scroll to certain area. That area are in a ScrollArea componente, but when i click to scroll to some view nothing happens.
If i change scrollArea to some normal <div> with scroll everything works. Any problem related with ScrollArea and scrollIntoView hook?

[lofty quarry]

Use viewportRef prop instead of ref

[formal sonnet]

But how can a scroll to a "section" inside of a scrollArea? viewportRef is only available for scrollArea component right?

[lofty quarry]

Try passing scrollableRef to viewportRef prop of ScrollArea component
https://mantine.dev/hooks/use-scroll-into-view/#parent-node

viewportRef is only available for ScrollArea component

[formal sonnet]

Yep thats it! Thanks

One more thing, it is possible to have multiple targets? Like for different sections in scrollArea?

[lofty quarry]

It seems that this is not supported

But you can try to do something like that

const { scrollableRef: ref1 } = useScrollIntoView();
const { scrollableRef: ref2 } = useScrollIntoView();

const scrollableRef = useMergedRef(ref1, ref2);

<ScrollArea viewportRef={scrollableRef}>
  ...
</ScrollArea>

And then you should have one scrollableRef and two different targetRef properties and scrollIntoView methods