Problem with ion-refresher and ion-alpha-scroll about ionic2-alpha-scroll

[leonardogbr]

@Hanzofm

I faced the same issue, but I found a workaround for this.
It happens because ion-refresher set the top style property and alpha-scroll also do this. So when you use the refresher for first time it duplicates the top property of alpha scroll.

Workaround:

In your template set an ID for the alpha-scroll

<ion-content no-bounce>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingText="{{'pullto' | translate}}">
    </ion-refresher-content>
  </ion-refresher>

  <ion-alpha-scroll #alphaScroll
    [listData]="favorites"
    key="title"
    [itemTemplate]="alphaScrollItemTemplateRef"
    [currentPageClass]="currentPageClass"
    [triggerChange]="triggerAlphaScrollChange">
    ...
  </ion-alpha-scroll>
</ion-content>

In your page.ts use ViewChild to get alpha scroll element and than change doRefresh function. Set top: 0px to the .ion-alpha-sidebar. Something like this:

import { Component, ViewChild, ElementRef } from "@angular/core";
...
export class YourPage{

  @ViewChild("alphaScroll", { read: ElementRef }) alphaScroll: ElementRef;
  ...
  doRefresh(refresher) {
    for (let element of this.alphaScroll.nativeElement.childNodes) {
      if (element.className == 'ion-alpha-sidebar') {
        element.style.top = '0px';
      }
    }
    ...
  }  
}

It solved the problem for me. It's not a good solution but for now it works.

Hope it Helps.