JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="http://media02.hongkiat.com/infinite-page-scroll/demo/infinite-scroll/manual-trigger.js"></script>
<script src="http://media02.hongkiat.com/infinite-page-scroll/demo/infinite-scroll/jquery.infinitescroll.js"></script>
<div id="content">
	
		<h1>Infinite Scroll Demo</h1>
		
		<p>One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.</p>

		<p>Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.</p>

		<p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>

		<p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>

		<p>Hong Kong...

JavaScript

$(document).ready(function(){
    $('#content').infinitescroll({
        navSelector: "#next:last",
        nextSelector: "#next:last",
        itemSelector: "#content",
        debug: false,
        dataType: 'html',
    maxPage: 4,
        path: function(index) {
            return "index" + index + ".html";
        }
        // appendCallback   : false, // USE FOR PREPENDING
    }, function(newElements, data, url){
      // used for prepending data
        // $(newElements).css('background-color','#ffef00');
        // $(this).prepend(newElements);
    });
});