How can I make a group scroll to a specific position?

Here’s how to scroll to a position specified in pixels.

Make sure the Group node you want to scroll has scrolling enabled
Screenshot 2022-02-02 at 17.00.33

Once that’s enabled we’ll add some code that does the scrolling.
Here’s an example of a button that initiates the scroll (you could trigger this from anything, not only a button)

Screenshot_2022-02-02_at_16.16.49

Here’s the code for vertical scrolling:

Inputs.group.getDOMElement().scrollTo({
    behavior: 'smooth',
    top: Inputs.positionInPx
})

For horizontal, replace top with left.
That’s it!

If you happen to use the other method of scrolling, where “Native platform scroll” is unchecked, then use this code instead:

const milliseconds = 500;
const xPosition = 0;
const yPosition = Inputs.positionInPx;
Inputs.group.innerReactComponentRef.iScroll.scrollTo(xPosition, -yPosition, milliseconds);

This is a bit of a hack though so might break with future Noodl versions since it’s using internal APIs.

1 Like