Horizontal scroll view start from right

#1

I have a horizontal scroll view. It scrolls from left to right. I want to start from right side and scroll to left. How should I achieve this?

#2

You may programmatically scroll to right most, once the items inside are loaded. Then your user will actually have to scroll right to see other items.

#3

Hi @manojdcoder
I implemented it. But it only works on tap event, not loaded event. (I want to scroll to the right immediately). Here is my code:

<ScrollView #ScrollList (scroll)="onScroll($event)" (loaded)="scrollRight($event)" orientation="horizontal">
    <StackLayout  orientation="horizontal">
        <Image height="200" src="http://sazmand.com/images/projects/sazmand-retro-tour.png"></Image>
        <Image height="200" src="http://sazmand.com/images/projects/vagara.png"></Image>
        <Image height="200" src="http://sazmand.com/images/rocket.png"></Image>
        <Image  height="200" src="http://sazmand.com/images/projects/sazmand-retro-tour.png"></Image>
    </StackLayout>
</ScrollView>

And

export class HomeComponent implements OnInit {
    @ViewChild("ScrollList") scrollList:ElementRef;
    ngOnInit(): void {
        this.scrollLayout = this.scrollList.nativeElement;
    }
    scrollRight(args: ScrollEventData) {
        /* this works fine when called by tap event, bot loaded event */
        this.scrollLayout.scrollToHorizontalOffset(400, false);
    }
}
#4

You are loading images from remote server, the image width is unknown until it’s loaded. So ScrollView itself is not scrollable on loaded event. ScrollView’s width / scrollable content is decided when the image is downloaded from server. So you have either set a fixed width to your images / listen for each image download and scroll to right.

#5

I set width to the images, but no difference. I even set loaded event to the images. But again the result is the same.

Of course loaded event is listening to element loading , not image itself loading.
Any other solution?

#6

For now, I solved by setting a timeout. Is it a good alternative?

setTimeout(()=>{
    this.scrollLayout.scrollToHorizontalOffset(200, false);
});
#7

Yes, that could be a easy workaround.