Skip to main content

Infinite Scroll

Implementation​

The Organic CMS framework includes built-in support for Infinite Scroll on articles at the core level.

For a minimal integration of infinite scroll into your templates, it's essential to retrieve the ref property within the Article component. Subsequently, this should be forwarded to the highest-level wrapper of your template.

See example

Activation​

To leverage the Infinite Scroll capability, it must first be activated from the CMS. Infinite Scroll activation

Customization​

Theme options​

Infinite Scroll provides several configuration options at the theme level to cater to specific requirements.

  pageTypes: {
    article: {
      templates: [
        {
            name: 'default',
            component: ArticleTemplate,
            infiniteScroll: {
                disabled: false, // Option to disable Infinite Scroll at the template level
                // See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
                intersectionObserverOptions: { // Configuration for the Intersection Observer
                  rootMargin: "500px",
                  threshold: 1,
                }
            }
        },
      ],
    },
}

Backend customization​

The Organic CMS framework offers the organic/infinite_scroll/next_post_id hook, permitting the customization of the logic behind selecting the succeeding post.

Refer to the Backend/hooks section for in-depth information.

Usage​

By default, posts are displayed in infinite scroll in a descending chronological order. However, there are provisions to modify this behavior:

  1. Entire Exclusion: A post can be entirely omitted from the Infinite Scroll. Such a configuration ensures no subsequent posts are displayed beneath this specific post. Conversely, this post won't be displayed beneath any other post within the Infinite Scroll paradigm.

  2. Manual Prioritization: Posts can be deliberately designated as top-priority. This designation ensures its positioning at the forefront of the Infinite Scroll experience.

    • Within Post settings, editors possess the flexibility to set sequential prioritization - first, second, third, and so on.
    • Highest priority is assigned with a Priority value of 100. Secondary priority can be allocated with a decremental value, and so on.
    • Editors aren't mandated to manually modify priority for older posts. For instance, assigning a post a priority of 100 will automatically downgrade the previous post (with a 100 priority) to a priority of 5.

Below is the representation of this configuration in the editor interface.

Infinite scroll priority