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.
-
Ajax Load More 7.0
Refactoring Ajax Load More for the future.
-
Tracking Pageviews with Google Analytics 4
Measuring page views automatically with GA4 and Ajax Load More.
-
Ajax Load More 5.6
A release focused on new features, facet filtering and extending existing functionality.
-
Instant Images Adds Openverse API Integration
Instant Images now offers API integrations with Unsplash, Openverse, Pixabay and Pexels, providing access to millions of high-quality images in a single WordPress plugin.
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;
}
CSSThe 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.