Skip to main content

Ionic Hide Floating Action Button (Fab) 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 post, we will take a look at how you can hide the FAB button on Scroll in an Ionic app. We will hide the button when the user has scrolled a certain amount. Also, we will not just hide and show the FAB but we will animate it as well.  We will create a directive that will accomplish this for us.

 

Step 1)

Let’s start off by creating a new project with the blank template. We will do that by running the following command.

Note that I have navigated the terminal inside the newly created project. We will run all the following commands inside it.

 

Step 2)

Now we will create a new directive. To do that run the following command.

Note that this will create a file named hide-file.ts in the directives folder. Also, note that the name of the directive is  HideFabDirective.

 

Step 3)

The Ionic CLI does not automatically inject the directive inside the app module. We will have to do it manually. So open up src\app\app.module.ts and code it as follows.

 

Step 4)

Now we will add a FAB to our home page. Also, we will need to create some content to make the page scrollable. You can do this according to your app. Make the following changes to src\pages\home\home.html.

Note here that on line 9 I am adding our hide-fab directive to the ion-content tag. Here I am just rendering a list of items so the page is scrollable.

Step 5)

We will create the items for the list. So open up src\pages\home\home.ts and code it as follows.

Here I am just creating a list of 100 items so our page is scrollable. You do not have to do this if you already have enough content to make your page scrollable.

 

Step 6)

Now it’s the time to code our directive which will handle all functionality to show and hide the FAB button. Open up src\directives\hide-fab\hide-fab.ts and code it as follows.

That’s a lot of code so let’s understand it piece by piece.

In the @Directive decorator, we have the following.

Here the directive will get the ionScroll event from the ion-content.  We will wire up a function called handleScroll() to the ionScroll event.

We are also coding the ngAfterViewInit() you can use ngOnInit() as well. But do not use the constructor as Renderer and ElementRef modules are only available once the page has been initialized.

Inside ngAfterViewInit() we have the following.

Here we are grabbing a reference to the FAB button and setting up a transition.

Next, we have the handleScroll() function. We have the following code in it.

We are checking if the user us scrolling up or down using the if condition. Note that we have this.threshold value. This value will determine how much the user needs to scroll in one swipe to hide the FAB button. I have set this value to 10 you can fine tune it as you wish.

Next, we are showing or hiding the button using .setElementStyle.

 

Conclusion

Showing and Hiding FAB Button in Ionic Apps is not too complicated. Here all the code shown can be placed in a page component after appropriate changes. But we have created a directive which can be reused as well. Also creating a directive in such a way will make our code neat and organized.

 

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. :-)

  • Sharanagouda K

    is it possible to create rectangular type customized fab button

    • add the following to your css file

      .fab {
      border-radius: 0;
      }

      • Sharanagouda K

        it makes Squire not rectangular, I tried to change width and height but not effecting

  • We Paps

    Hi, thanks for this tutorial.
    I use this tutorial without lazy loading and its very good. But with lazy loading is not working.
    Can you update this tutorial for the lazy loading please ?

%d bloggers like this: