Search code examples
javascriptnativescript

Move to center a selected object with scrollableWidth and scrollToHorizontalOffset

I am having a number (10) of objects which are clickable, but struggling with moving a selected one to the middle of the scroll view. You can see on the image below that number four is selected but not in the middle.

example

I tried to use:

myScrollView.scrollToHorizontalOffset(myScrollView.scrollableWidth / 2, true)

But it always bring the whole scroll view into the middle. Can anyone help with making it working? Thank you in advance.

Solution

  • Since You didn't put the Angular tag, I am assuming you are using the Typescript flavor of Nativescript.

    In order to do this, you'd have to find a way keep track of your base (starting point) and your target (the one that the user just clicked) so that you can get there x offsets and animate the scroll from one to another.

    Here's an example in your code behind:

    export function() {
   const base = page.getViewById('label1') as Label;
   const target = page.getViewById('label2') as Label;
   myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x, true);
}

    Now, the code above will just do a minimum scroll to get to your target element (and you can use a different element other than the example label). But if you want to make it center, you can add an additional offset depending on how wide your scroll container is. eg.

    myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x + (myScrollView.width / 2), true);

    Note that this is my hypothesis from something similar I've done before (just not needing to be center). So might need to play with the additional offset.

    EDIT: (This is how to make it work specifically according to the OPs need)

    myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x - (myScrollView.scrollableWidth / 2)), true);