ScrollIntoView not working on Android

Ionic Framework
1

I am trying to create buttons that can be used to scroll a scrollable area.

I am using document.getElementById(id).scrollIntoView(false); and it is working correctly on iOS. But when it is run on an Android device the area doesn’t scroll. Does anyone know why this would be happening?

  <ion-grid id="recentsList" class="recentsList">
                        <ion-row justify-content-center>
                            <div class="recentCol">
                                <ion-col size="12" *ngFor="let item of listOfRecents.reverse(); let i = index">
                                    <ion-button id="recentIndexId{{i}}" *ngIf=" item.length < 100 " [ngStyle]="{ 'font-family': this.fontChoiceService.currentFont} " fill="outline " class="catbuttonSmall " (click)="inputSelected(item) " wrap>{{item}} </ion-button>
                                </ion-col>
                            </div>
                        </ion-row>
                    </ion-grid>

scrollToElementDown() {
    console.log('error message number 5');
    if (this.currentScrollIndex < this.listOfRecents.length - 1) {
      console.log('error message number 6');
      this.currentScrollIndex = this.currentScrollIndex + 1;
    }
    const currentIndex = this.currentScrollIndex;
    const id = 'recentIndexId' + currentIndex.toString();
    console.log('error message number 7 ', document.getElementById(id).innerHTML);

      document.getElementById(id).scrollIntoView(false);
    console.log('error message number 8');
  }

I am running Ionic 4 in Angular.

2

Since ionic apps don’t use document scroll to handle scrolling interactions, your approach isn’t going to work.

Use the ionContent’s scrolling methods.

You’re approach will need to change, a bit though.

3

Thanks for the response that’s good to know moving forward and reworking it isn’t a problem! I am curious about why it works on iOS and not on Android if it isn’t supported. Could there be something in Android that isn’t being called from Ionic?

4 
 static ScrollToId(Id) {
     let Element = this.ElementFromId(Id)
     if (Element)
         Element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" })
}

Hi Mike,
The scrolling behavior is perfect in my browser/PWA build when using my DOM.ScrollToId(Id) helper above. For example, when scrolling DOWN

  1. my currently CSS selected/highlighted item may start at the top of the list and therefore the top of the list’s viewport (ion-content between ion-header & Footer/Tabs),
  2. Pressing the down arrow-key causes the CSS highlight to move down and it eventually reaches the middle of list,
  3. then the highlight stays in the middle of the viewport while the list is scrolled up until the last item of the list appears at the bottom
  4. then the highlight moves to the bottom of the viewport.

I would say this is very logical behavior and all of this from the single call to .scrollIntoView({ behavior: “smooth”, block: “center”, inline: “nearest” })

However, when running on an android device (as an APK), I don’t know how to get Content.scrollTo (0, yOffset, 1000) you suggest above, to work in a similar fashion. Currently the highlight keeps moving to the bottom and disappears behind the bottom/tabs, the list is never scrolled up to keep the highlighted item in view?

Can anybody help? Thank you.
still in ionc3 :slight_smile:

Here is my reproduction code (plunker) using ion-content scrolling, make sure to size your browser window or slide the console output to cause the ion-list to display scrolling bar.

image
image384×808 19.1 KB