In this example:

Ajax Load More will infinite scroll content within a specified HTML container.

The scroll_container parameter is used to specify an HTML container that holds an Ajax Load More instance – this allows infinite scrolling to be triggered on the container element and not the browser window.

  • Ajax Load More website launch illustration

    A New Chapter for Ajax Load More

    Ajax Load More has a new home. Discover documentation, demos, premium add-ons, support resources, and everything related to the WordPress infinite scroll plugin.

  • Prefetching data with Ajax Load More

    Data Prefetching with Ajax Load More

    Improve the perceived loading times of Ajax Load More requests with the new prefetching feature.

  • Release Notes Image

    Ajax Load More 7.2

    Query Loop integration, previews, and more future proofing.

  • Release Notes Image

    Ajax Load More 7.0

    Refactoring Ajax Load More for the future.

Note: The scroll_container element must have the proper CSS applied to allow for scrolling.

The following CSS was used to style the scroll_container element.

#alm-scroll-container { 
   padding: 15px; 
   display: block; 
   overflow: hidden; 
   overflow-y: auto; 
   width: 100%; 
   max-height: 475px; 
}
CSS

The following shortcode was used to create the Scroll Container example.

[ajax_load_more preloaded="true" preloaded_amount="4" posts_per_page="4" scroll_container="#alm-scroll-container" scroll_distance="10" pause="true" pause_override="true"]

The following Template was used to create the Scroll Container example.