In my current project, I am utilizing Bootstrap and Fuel UX v3.4.0 with the goal of implementing Infinite scroll throughout my entire page. Unfortunately, I have encountered difficulties in achieving this implementation.
By replicating the infinite scroll example from on fiddle, it became apparent that the functionality works perfectly when a specified height is defined for the element but fails otherwise.
Below is a snippet of the HTML code:
<body class="fuelux">
<div class="infinitescroll" id="myInfiniteScroll1" style="border: 1px solid #ccc; border-radius: 4px; float: left; padding: 6px 10px; width: 48%;"></div>
<div class="infinitescroll" id="myInfiniteScroll2" style="border: 1px solid #ccc; border-radius: 4px; float: right; padding: 6px 10px; width: 48%;"></div>
<div style="clear:both;"></div>
CSS for setting the Height:
#myInfiniteScroll1 {
height: 200px;
}
#myInfiniteScroll2 {
height: 200px;
}
Javascript Section:
// JavaScript code block here
The objective is to eliminate the need for CSS adjustments as shown in the previous fiddle and to enable the infinite scroll feature when reaching the end of the page. You can find an updated version of the fiddle at http://jsfiddle.net/z5y41e9c/2/.
To address the use of the 'helpers' argument mentioned in the Fuel UX documentation, further clarification would be greatly appreciated. Your insights on how to utilize this argument effectively for future reference would be beneficial.