Scroll Container

Constraining infinite scroll to a parent container

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.

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 Repeater Template was used to create the Scroll Container example.