Horizontal Scroll - UX/UI issues

Need help Responsiveness
13

The following approach loads the content for all visible cells (up to 100) without scrolling. Any cells that aren’t at least partially visible on the page will be loaded only through user interaction (once the user starts manually scrolling).

  1. Enable element Ids in the app settings.
  2. Give the RG an id (“repeating-group-id” in this case).
  3. Put an HTML element on the page, and add the following:
<script>
$( function() {

	var timer,
	    count          = 0,
	    MAX_ITERATIONS = 100;

	timer = setInterval( function() {
		$( '#repeating-group-id' ).scroll();
		if ( ++ count > MAX_ITERATIONS ) {
			clearInterval( timer );
		}
	}, 10 );
});
</script>

This works great for my purposes. In fact, for mobile performance reasons, I’d rather not initially load more content than would be visible on the page. Tested in Chrome, Firefox, Safari, and Opera. (Haven’t tested in Edge yet. If someone does, let me know if it works.)

-Steve

7 Likes