1a - Infinite Scroll full page demo
Hi! This demo will show off several key features of Infinite Scroll.
- Full page scrolling
- Changing browser URL and history. Watch how the URL changes as you scroll. Try refreshing on a changed page.
- Embeds like CodePens and Tweets have their
<script>s loaded and embeds rendered
The code looks like this:
<div class="article-feed">
<!-- .articles will be added to .article-feed -->
<article class="article">...</article>
<article class="article">...</article>
...
</div>
<!-- status elements -->
<div class="scroller-status">
<div class="infinite-scroll-request loader-ellips">
...
</div>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
<!-- pagination has path -->
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>
// init Infinite Scroll
$('.article-feed').infiniteScroll({
path: '.pagination__next',
append: '.article',
status: '.scroller-status',
hideNav: '.pagination',
});
