Update DOM in scroll event Ionic 2/3

Question

I want to do a progress bar when user scrolls down. When it's down all the way, the bar is 100% width.

The problem is the "per" value is not updated to view on scroll event

I have checked this and this, but none worked

Template

<ion-header>
  <ion-navbar color="primary">
    <ion-title>{‌{title}} ({‌{code}})</ion-title>
  </ion-navbar>
</ion-header

<ion-content>
<ion-toolbar style="position: fixed; opacity: 0.8; z-index: 1" *ngIf="readProgress">
    <div id="bar" color="primary">{‌{per}} 30%</div>
</ion-toolbar>
</ion-content>

TS FILE

this.content.ionScroll.subscribe((data) => {
  if (data.scrollTop < 1) {
    this.readProgress = false;
    this.title='Not Scrolling';
  } else if (data.scrollTop > 0) {
    this.readProgress = true;
    this.title='Scrolling';
  }
  this.per = data.scrollTop;  
});

Whats the problem with your current code? The observable doesn't fire? The scrollTop doesn't affect the dom? — misha130, May 06 '17 at 10:17
The scrollTop is not affecting the dom. The variable 'per' is fed the value of scrollTop which should be displayed here
{‌{per}} 30%
When I scroll I need the value of scrollTop/current scroll position to be displayed but its not — TapiwaJoel Mudavanhu, May 06 '17 at 10:29
I am not sure but try calling changedetectionref.detectchanges because the change might be outside of ngzone. Basically it doesn't detect that it changed — misha130, May 06 '17 at 10:42

score 0 · Answer 1 · answered May 06 '17 at 11:20

I finally got it working by making Angular detect changes after the 'per' value changes

1. Imports

import {ChangeDetectorRef, Component, EventEmitter, Output, ViewChild} from "@angular/core";

2. Constructor

constructor(public navCtrl: NavController, public navParams: NavParams, public cdRef: ChangeDetectorRef) {
      }

3. On Scroll Event

   this.content.ionScroll.subscribe((data) => {
          if (data.scrollTop < 1) {
            this.readProgress = false;
            this.title='Not Scrolling';
          } else if (data.scrollTop > 0) {
            this.readProgress = true;
            this.title='Scrolling';
          }
          this.per = data.scrollTop;  
            this.cdRef.detectChanges();
        });

Thanks to @misha130 – TapiwaJoel Mudavanhu May 06 '17 at 11:21 — TapiwaJoel Mudavanhu, May 06 '17 at 11:21

Update DOM in scroll event Ionic 2/3

1 Answers1

1. Imports

2. Constructor

3. On Scroll Event