Skip to main content

Ionic Hide Show Tabs On Scroll

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can show and hide Tabs On Scroll in an Ionic 2 App. Screen real estate is exceptionally valuable when it comes to mobile apps, so getting those extra few lines of content can make you app look spacious and easy on the eyes. We will start by creating a new app with the tabs template, then when the user scrolls down a certain length the tab bar will be hidden and when the user scrolls back up to the top the bar is displayed.

A thing to note here is that this may cause some frustration among users if they have scrolled a long way down. Then they will have to scroll back up in order for the tabs to show. But that can be tweaked as well. That is a topic for another tutorial. For now, let’s get started with this one.

Step 1)

We will start off by creating a new Ionic 2 app with the tabs template by running the following command in the Terminal / Command Prompt.

Step 2)

Here we will set the tabs placement. This is an optional step, you can specify the location where you want the tabs to show up, i.e, top or bottom. If no location is specified the default location of tabs as per the operating system will be chosen. You can set tabs placement by going through my previous tutorial on How To Place Ionic 2 Tabs At The Bottom Or Top Of The Screen

Step 3)

Now, let’s create our view. In our view, we will need to create a list that will give us some area to scroll. Now open up src\pages\home\home.html and code it as follows.

In the above code on line 7,  notice that we have #contentRef template variable. Also, we are binding the ionScroll event to the scrollingFun($event) function. From line 16 we have a typical list that will display all the items in the items array.

Step 4)

Now it’s time to code up our TypeScript file for the home component, so open up src/pages/home/home.ts and code it as follows

 

Let’s break the above code and understand it piece by piece.

First of all, we are importing  ViewChild on line 1.

Then we are using the contentRef with the view-child inside our class. From the above code, the contentRef template variable will be used in our Typescript code as contentHandle.

Moving on, we are declaring some variables and populating a list

 

Using the Ionic 2 lifecycle hooks we are getting the tab-bar placement and the tab-bar height in the ionviewDidEnter() function

 

Lastly, we have the scrollingFun(e) which is executed on every scroll as shown below.

The function is passed the scroll event e that has the scrollTop property. The e.scrollTop contains the value that the user has scrolled down. It is zero if is the user is at the top.

If the user has scrolled greater than the height of ion-content tag then we hide the tab-bar. We are getting the height of the ion-content tag from the view-child from this.contentHandle.getContentDimensions().contentHeight.

And if the height is less than that of the ion-content tag we are again displaying the tab-bar.

We are doing the actually hiding and showing by setting document.querySelector(".tabbar")['style'].display to none and flex respectively.

Depending on the screen size the value to the tab-bar height and ion-content height will be different. For that reason, we are not using static values, but getting them dynamically and storing them when the view loads using ionViewDidEnter() function.

 

Conclusion

Hiding the tab-bar is a great way to enhance the user experience by giving the user that extra screen space. But a thing to keep in mind is that if the list very long and the user scrolls all the way down then to get the tabs back the user will have to scroll all the way up to get the Tab-Bar back. This is not a big issue as it can easily be addressed by adding a scroll to top button.

If you are using the Tabs template then hiding the Tab-bar is a neat little feature to have in your app.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Luís Siza Jó

    Simple code, working perfectly, thanks

    • Glad to know it’s working. Thanks for the idea.

      • Find Docpharmacy

        Bonsoir, c’est un hors sujet.
        J’ai vu un de vos anciens posts qui montrait comment lancer un code USSD a partir d’une app Ionic. Je voudrai savoir s’il existe un moyen de capturer la réponse du code USSD pour pouvoir afficher le message au sein de l’application ?

        • héy,
          Lorsque vous composez le code USSD, le contrôle est transféré vers l’application native dialer.
          Il n’y a aucun moyen d’obtenir ce que l’utilisateur a tapé dans l’application de numérotation téléphonique.
          En outre, il n’y a aucun moyen d’obtenir la réponse ainsi que la réponse qui se produit en dehors de notre application.
          J’espère que cela t’aides.

          À votre santé,
          Prantik

          • Find Docpharmacy

            Merci pour votre réponse. Je me disais également que ce n’était pas possible.

  • Allan Jhones

    How can I hide the tab-bar when I click to one item and change to another screen, for example?

  • james

    (ionScroll) not working for me:(

    • The event does exist as you can see in the docs here http://ionicframework.com/docs/api/components/content/Content/#output-events

      Try updating to the latest version of ionic.

      • james

        yes. I’m on the latest version:(
        I’ve been wasting it for a few hours..
        Thanks anyway..

        • Did you find the solution? Pull up a repo or a StackOverflow question and I would be happy to take a look at it.

          Regards

          • james

            yes.
            I used with (scroll)=”functionName()” – not (ionScroll)

            and with these listener to catch mobile & desctop:
            @HostListener(‘window:scroll’, [‘$event’])
            @HostListener(‘mousewheel’, [‘$event’])
            @HostListener(‘DOMMouseScroll’, [‘$event’])
            @HostListener(‘onmousewheel’, [‘$event’])
            function (event) {
            // your code
            }

  • You have no idea how long I looked for this solution… and it seems so simple. Thank you!

  • Sharanagouda K

    how to create when we scroll up header or sub header slowly come down or creating a header when we scroll up like whatsApp check whatsApp group detail and scrollup

  • Alejandro Hidalgo

    Wonderfull explanation! thanks for sharing!

%d bloggers like this: