Skip to main content
Version: v6

ion-infinite-scroll

The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.

The expression assigned to the ionInfinite event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the complete() method on the infinite scroll instance.

Loading Text and Spinner

The ion-infinite-scroll-content is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the ion-infinite-scroll-content component.

Custom Content

Separating the ion-infinite-scroll and ion-infinite-scroll-content components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.

Usage with Virtual Scroll

Infinite scroll requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the ion-content and indicate which element container is responsible for the scroll container with the .ion-content-scroll-host class target.

<ion-content scroll-y="false">
  <virtual-scroll-element class="ion-content-scroll-host">
    <!-- Your virtual scroll content -->
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

Accessibility

Developers should assign the role="feed" attribute to the scrollable list of items that are added to or removed from as the user scrolls.

Individual list items should either have role="article" or use the <article> element directly.

For example, when rendering a collection of items in an ion-list:

<ion-content role="feed">
  <ion-list>
    <ion-item role="article"> First item </ion-item>
    <ion-item role="article"> Second item </ion-item>
    ...
  </ion-list>

  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

Please refer to the ARIA: feed role documentation for additional information.

Interfaces

InfiniteScrollCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

Properties

disabled

Descriptiontrueの場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 true を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。
Attributedisabled
Typeboolean
Defaultfalse

position

Description無限スクロール要素の位置を指定します。値は top または bottom のどちらかです。
Attributeposition
Type"bottom" ｜ "top"
Default'bottom'

threshold

Descriptionスクロールしたときに infinite 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、10%という値を使用すると、ユーザがページの下から10%スクロールしたときに infinite 出力イベントが呼び出されるようになります。また、ページの下から100ピクセル以内にスクロールした場合には、100pxという値を使用します。
Attributethreshold
Typestring
Default'15%'

Events

NameDescription
ionInfiniteスクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの complete() メソッドを呼び出す必要があります。

Methods

complete

Description非同期操作が完了したら、ionInfinite出力イベントハンドラ内で complete() を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が loading 状態です。データの受信とUIの更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を loading から enabled へと変更します。
Signaturecomplete() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.

Contents

Edit this page