Как определить, имеет ли ионный контент полосу прокрутки?

Question

Я хочу скрыть или показать элементы, когда есть или нет полосы прокрутки на ion-содержимом.В частности, я хочу показать кнопку (для загрузки большего количества элементов в списке), когда полоса прокрутки отсутствует, и скрыть ее там, где есть полоса прокрутки (поэтому загрузка большего количества элементов осуществляется с помощью ion-infinite-scroll).

Мое приложение Ionic также будет развернуто на рабочем столе, поэтому пользователи с большими экранами изначально не увидят полосу прокрутки и, следовательно, не будет активирована ion-infinite-scroll.

Вот демонстрация, демонстрирующаявыпуск:

home.page.html

  
    
      Ionic header
    
  



  {{item}} Загрузить больше предметовИонный нижний колонтитул

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  itemList: string[] = [];

  constructor() {}

  ionViewWillEnter() {
    this.incrementItemList(5);
  }

  incrementItemList(times: number) {
    for (let i = 1; i <= times; i++) {
      this.itemList.push(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat nam sapiente iusto eligendi`);
    }
  }

  loadMoreItems(event: any) {
    setTimeout(() => {
      this.incrementItemList(15);
      event.target.complete();
    }, 1000);
  }

}

Я использую Ionic 4.5.0 + Angular.

Я пытался использовать getScrollElement , scrollHeight , clientHeight , offsetHeight , но безуспешно.

Есть идеи?

Answer 1

Обновление: я спал на нем, а затем понял, что я все неправильно подходил.

Вот рабочий пример. Он проверяет в трех местах, чтобы убедиться, что не пропускает появившуюся полосу прокрутки:

1. Когда страница загружается
2. При добавлении нового контента
3. Когда пользователь прокручивает

В моей тестовой среде, дважды нажмите кнопку «Добавить», которая находилась на ТОЧНОЙ высоте экрана, поэтому кнопка не всегда исчезала. Я добавил проверку ionScrollEnd, чтобы обеспечить дополнительный способ ее отлова.

Вы можете удалить console.log, разбросанные по коду, я оставил его, чтобы помочь вам понять, что происходит.

Пример страницы:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Scrollbar Test
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true" (ionScrollEnd)="onScrollEnd()">
  <div class="ion-padding">
    <p *ngFor="let item of itemList">{{ item }}</p>

    <ion-button *ngIf="!hasScrollbar" (click)="addMoreItemsButtonClick(5)">Load more items</ion-button>
  </div>

  <ion-infinite-scroll (ionInfinite)="loadMoreItems($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>
      Ionic footer
    </ion-title>
  </ion-toolbar>
</ion-footer>

Пример кода:

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

@Component({
  selector: 'app-scrollheight',
  templateUrl: './scrollheight.page.html',
  styleUrls: ['./scrollheight.page.scss'],
})
export class ScrollheightPage implements OnInit {

  public hasScrollbar: Boolean = false;

  @ViewChild(IonContent) private content: IonContent;

  itemList: string[] = [];

  constructor() { }

  ngOnInit() {
    // check at startup
    this.checkForScrollbar();
  }

  ionViewWillEnter() {
    this.incrementItemList(5);
  }

  addMoreItemsButtonClick(quantity: number) {
    this.incrementItemList(quantity);

    // check after pushing to the list
    this.checkForScrollbar();
  }

  onScrollEnd() {
    // check after scrolling
    this.checkForScrollbar();
  }

  incrementItemList(times: number) {
    for (let i = 1; i <= times; i++) {
      this.itemList.push(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat nam sapiente iusto eligendi`);
    }
  }

  loadMoreItems(event: any) {
    setTimeout(() => {
      this.incrementItemList(15);

      event.target.complete();
    }, 1000);
  }

  checkForScrollbar() {
    this.content.getScrollElement().then((scrollElement) => {
      console.log("checking for scroll bar");
      console.log({scrollElement});
      console.log({scrollHeight: scrollElement.scrollHeight});
      console.log({clientHeight: scrollElement.clientHeight});
      this.hasScrollbar = (scrollElement.scrollHeight > scrollElement.clientHeight);
      console.log({hasScrollBar: this.hasScrollbar});
    });
  }
}