How To Scroll Ionic 4 List Manually From Code [v4]

ionic-4-list-scrolling

When you are working with lists and especially long lists with many items, you need a way to jump to items.

There is no out of the box Ionic solution but we can fall back to the standard web API (as Ionic does most of the time as well) to get the intended behaviour for our app.

ionic-4-scroll-list

We’ll therefore build a list where we can jump to any item, scroll it to a different position of the view and finally also scroll the whole list up or down!

Prerequisite

As said before we are using the standard functions that are available everywhere (well Safari has minor issues..) so the only thing you need to do right now is create a project like:

No need for additional components and pages – this is going to be a quicky quick win!

Implementing Manual Scroll

First of all we need a list, a simple, standard list with a lot of items. Our view also consists of a few other noteworthy elements:

  • We want to receive events from the ion-content in order to react to scroll events later
  • We have an input so we can dynamically scroll to the id we enter
  • We dynamically set the type of transition and also where inside the item should be scrolled using block and behavior

How all of this works will make more sense once we implement the real functionality, for now go ahead and change your app/home/home.page.html to:

We will also display a FAB button at the bottom to either scroll down the whole list or scroll back up – we make this dependent on how far we have scrolled the view (that’s the reason why we want to catch the ion content scroll events!).

In order to mark the active item a bit more we add the active class to the item with the corresponding index, and to style it a bit differently add this to your app/home/home.page.scss:

Now we get to the meat and the actual functionality.

First of all we fill our dummy array with 100 elements in order to have a real list where scrolling from code makes sense.

The trick to scroll to an Ionic list item is to get access to the list using the Viewchild annotation, then finding the native element (which is a child of the list of course) and then scrolling that item into the view!

We also need to read the real ElementRef which gives us the native Element of our DOM!

As mentioned before with our two additional fields, we can also make the transition to the element smooth, but this is not working on Safari yet. Also, we can decide if the item should be at the top, center or end of the view after we scroll to it!

Now go ahead and change your app/home/home.page.ts to:

But that’s not all, we also react to all scroll events of our view inside the onScroll() and save the scrollTop value which is basically the offset from top.

This helps to dynamically display a scroll bottom/ scroll top button inside the view as we did with our FAB button! We simply used 300, of course you should change this to your needs.

Finally, to scroll the ion content we also access it as a Viewchild and use the according functions on the IonContent variable to scroll the whole view.

There’s also another function to scroll to a specific point, so in another scenario you could also calculate the height of elements and do your scrolling based on that!

Conclusion

Although some functionality isn’t available in Ionic out of the box, scrolling your list manually to an item or different positions is no problem with the standard web functionality!

You can also find a video version of this Quick Win below.

Leave a Reply

Your email address will not be published. Required fields are marked *