<InfiniteScroll />


# <InfiniteScroll />

Infinite Scroll:

  • We can enable infinite scroll in amp pages in 3 ways:

  • 1: If featureConfig > infiniteScroll > source is custom then provide an async custom function for inlineConfig & remoteConfigEndpoint infiniteScroll is powered by customFunction response.

    • The response should be in this format for inline configurations
      • [ { "image": "", "title": "This article shows next", "url": "" }, // ... ]
  • Remote configurations require the server to return a JSON object with the pages key/value pair.

    • { pages: [ { "image": "", "title": "This article shows next", "url": "" } // ... ] }
  • For more information, please go through

  • 2: If featureConfig > infiniteScroll > source is relatedStoriesApi - infiniteScroll is powered by relatedStoriesApi response.

  • 3: If featureConfig > infiniteScroll > source is not provided, there needs to be a collection created with slug amp-infinite-scroll. The stories from this collection power the infinite scroll.

  • Please note that stories behind hard paywall (i.e. which have story.access === subscription) are not shown in infinite scroll.

  • Infinite scroll can be disabled by deleting the collection having slug amp-infinite-scroll.

  • The text for the separator that separates two stories in an infinite scroll can be customized. Pass the text of your choice to opts.featureConfig.infiniteScroll.storySeparatorText.

  • If you wish to override infinite scroll content, you can do so using the infiniteScrollRender render prop. See opts tutorial for more info.

View Source atoms/infinite-scroll/infinite-scroll.tsx, line 35