Scroll Container
Constraining infinite scroll to a parent container
In this example:
Ajax Load More will infinite scroll within a specified HTML container element.
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.
-
Accessibility and Ajax Load More
Building inclusive and accessible websites with Ajax Load More.
-
Introducing the WooCommerce Add-on for Ajax Load More
Infinite scrolling WooCommerce shop and product archives.
-
Join Our Affiliate Program
As a Connekt affiliate you will earn 25% commission on each successful sale.
-
Elementor Infinite Scrolling with Ajax Load More
A guide for infinite scrolling Elementor single post articles with Ajax Load More.
Note: The scroll_container element must have the proper CSS in place to allow for scrolling.
The following CSS was used as the styling for the scroll_container.
|
1 2 3 4 5 6 7 8 |
#alm-scroll-container { padding: 15px; display: block; overflow: hidden; overflow-y: auto; width: 100%; max-height: 475px; } |
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"]