Long magnetic scroll page in Ionic 2

Question

Hey Guys i need your help please,

is started to working on an Ionic 2 App. My Navigation is not that complicated. I have one menu if i click one item another menu opens with a submenu and if i click on an item in the submenu a third page should render above it and this works really fine. Now the third activity should be a very long scrolling site with a lot of section (the sections are on top of each other). And every section should have a toolbar with one back button to go back to the submenu and two arrow keys for the previous or next section.

Here a small picture

now my problems:

how can i achieve the magnetic part? I think it like so: the Bar sits on the top of the page and above the content. When i scroll the content goes underneath and i can scroll to the end. When iam at the end everything should stop and when i pull further the next Section Bar jumps to the top of my site.

I hope you can help me thank you ;)

Answer 1

Plunker Demo

To make this work you need to:

• Create a function that scrolls your scroll-content element to the top
• Track the scroll position of scroll-content
• Use *ngIf on your scroll to top button to conditionally show after scroll-content has reached a certain threshold.

Scroll to top function

I adapted this SO answer to apply to the scroll-content element

scrollToTop(scrollDuration) {
let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
let scrollInterval = setInterval( () => {
    if ( this.ionScroll.scrollTop != 0 ) {
        this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
    } else {
      clearInterval(scrollInterval);
    }
}, 15);

Track scroll-content position

This example uses the window height as the threshold for showing the scroll to top button like this:

this.ionScroll.addEventListener("scroll", () => {
  if (this.ionScroll.scrollTop > window.innerHeight) {
    this.showButton = true;
  } else {
    this.showButton = false;
  }
});

Button Html

<button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>

Full component Typescript

import { NavController } from 'ionic-angular/index';
import { Component, OnInit, ElementRef } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage implements OnInit {
  public ionScroll;
  public showButton = false;
  public contentData = [];

  constructor(public myElement: ElementRef) {}

  ngOnInit() {
    // Ionic scroll element
    this.ionScroll = this.myElement.nativeElement.children[1].firstChild;
    // On scroll function
    this.ionScroll.addEventListener("scroll", () => {
      if (this.ionScroll.scrollTop > window.innerHeight) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    });
    // Content data
    for (let i = 0; i < 301; i++) {
      this.contentData.push(i);
    }
  }
  // Scroll to top function
  // Adapted from https://stackoverflow.com/a/24559613/5357459
  scrollToTop(scrollDuration) {
    let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
    let scrollInterval = setInterval( () => {
        if ( this.ionScroll.scrollTop != 0 ) {
            this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
        } else {
          clearInterval(scrollInterval);
        }
    }, 15);
  }

}

Full component Html

<ion-navbar primary *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
  <button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>
</ion-navbar>

<ion-content class="has-header" #testElement>
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
    <div *ngFor="let item of contentData">
      test content-{{item}}
    </div>
  </div>
</ion-content>