Forums / National / Russian / Тех. поддержка / Как реализовать подргузку новых элементов в list (любой) бесконечно

подключаем js плагин jquery.infinitescroll.js
дописываем такой код в свой main.js 

if( $('.pagination__next').length )         // Если есть следующая страница в пагинации
{

	//infiniteScroll in Folio
	$container = $('.container-scrl');
	
	$container.infiniteScroll({
	  // options
	  path: '.pagination__next',
	  append: '.post-scrl',
	  history: false,//не меняем урл при подгрузке что бы не путать пользователя
	  prefill: true,
	  scrollThreshold: 800,
	  //history: 'push', //прописывает в историю и титл стр текущую стр
	  //historyTitle: true,
	  //button: '.view-more-button',//пока кнопку убрал
	});

	//дело в том что на догруженных элементах могут быть свои js которые не включаться
	//включить их надо после загрузки например как ниже
	//это специфика для конкретного сайта, тебе это может и не нужно, но как принцип я оставил
	$container.on( 'append.infiniteScroll', function( event, response, path, items ) {//включаем нужные функции для вновьсозданных объектов
				        $('.files-list-grid .files-list-grid-wrapper').css("opacity", 0);
				        $('.stories-list-grid .stories-list-grid-wrapper').css("opacity", 0);
				        // set a timer to re-apply the plugin
				        if (resizeTimer) clearTimeout(resizeTimer);
				        resizeTimer = setTimeout(collage, 200);
				        
	});

	$container.on( 'append.infiniteScroll', function( event, response, path, items ) {//включаем нужные функции для вновьсозданных бъектов
	  jQuery("[data-toggle=popover]").popover();
	  jQuery("[data-toggle=tooltip]").tooltip();
	});

	// просмотр историй без пагинации для гугланалитики
	var link = document.createElement('a');
	
	$container.on( 'append.infiniteScroll', function( event, response, path ) {
	  link.href = path;
	  ga( 'set', 'page', link.pathname );
	  ga( 'send', 'pageview' );
	});
	
}

и сама TPL

<div class="container-scrl">	
<!-- one story -->	
<!-- BEGIN: PRD_ROWS -->
<!-- article -->		
<article class="storiesart portstories-item post-scrl" itemprop="itemListElement" itemscope itemtype="http://schema.org/WebPage">
<!-- тут собственно сама запись -->			
<!-- важно обратить внимание на класс post-scrl в теге article -->	
</article>
<!-- article -->
<!-- END: PRD_ROWS -->
<!-- one story -->	
</div>	

<!-- PAGINATION -->	
		<!-- IF {PAGENAV_COUNT} > 1 -->
		<a class="pagination__next" style="display: none" href="{PHP.sys.canonical_url}&d=2" title="Load more stories">Load more stories</a>
		<!-- ENDIF -->
<!-- PAGINATION -->	
<!-- важно обратить внимание что что если есть постраничное разбитие - то есть есть более 1 страницы - сработает js infiniteScroll jquery.infinitescroll.js -->

это один из вариантов оформления - вся документация есть на https://infinite-scroll.com/

1 Надо подключить js плагин infiniteScroll

2 всюду где надо подрузку в tpl дописать class
<div class="container-scrl"> в который мы обрамляем то что будет подгружать

<article class="post-scrl" элементы которые подгружаем в цикле

<a class="pagination__next" триггер по которому начинаем подгружать

3 надо инициализировать действие плагина кодом js

Вот еще раз попробую посоветовать