Ionic 4 Scroll Position in Service/Guard

Question

I am trying to implement a feature similar to whats available in Facebook i.e. if you have scrolled the news feed, pressing hardware back button takes you to the top of the list.

For this I think believe canDeactivate of Router Guards would be the proper ways.

But I am unable to find a way to check if the page has been scrolled or not.

I have tried window.pageYOffset but this always returns 0, accessing ViewChild within a Guard always returns null.

Can anyone please guide how to achieve this?

you need to be specific about your tags as the different ionic versions do things very differently. I've cleaned it up based on your question title saying ionic4. — rtpHarry, Sep 10 '19 at 14:55

score 1 · Answer 1 · answered Sep 10 '19 at 15:15

There are two approaches for this that should help you.

First, starting with Ionic 4, you can register you back button handler using the Platform features:

https://www.freakyjolly.com/ionic-4-overridden-back-press-event-and-show-exit-confirm-on-application-close/

this.platform.backButton.subscribeWithPriority(999990,  () => {
   //alert("back pressed");
});

Secondly, you can use more features of Ionic 4 called scrollEvents.

I have explained how to use this feature in other answers:

Hopefully that will get you moving in the right direction.

I think that last answer should solve most of your issue, so something like this:

Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.

First, you need scrollEvents on the ion-content:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ion Content Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true">
 <!-- your content in here -->
</ion-content>

In the code you need to use a @ViewChild to get a code reference to the ion-content then you can use its ScrollToPoint() api:

import { Component, ViewChild } from '@angular/core';
import { Platform, IonContent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    // This property will save the callback which we can unsubscribe when we leave this view
    public unsubscribeBackEvent: any;
    @ViewChild(IonContent) content: IonContent;

    constructor(
        private platform: Platform
    ) { }

    //Called when view is loaded as ionViewDidLoad() removed from Ionic v4
    ngOnInit(){
        this.initializeBackButtonCustomHandler();
    }


    //Called when view is left
    ionViewWillLeave() {
        // Unregister the custom back button action for this page
        this.unsubscribeBackEvent && this.unsubscribeBackEvent();
    }

    initializeBackButtonCustomHandler(): void {
        this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999,  () => {
            this.content.scrollToPoint(0,0,1500);
        });
        /* here priority 101 will be greater then 100 
        if we have registerBackButtonAction in app.component.ts */
    }
}

Ionic 4 Scroll Position in Service/Guard

1 Answers1