JavaScript is the programming language of HTML and the Web.It plays a very important role in web. Its client side scripting language.JavaScript is also defined as a lightweight, interpreted programming language.
It is complimentary to and integrated with Java.

JavaScript is used for many purposes in web as its having many inbuilt functions that is used according to the requirements by the developers.

Infinite scroll is also a feature of JavaScript that also used in most of the websites that are having many pages data .Infinite scroll helps to load the website fast if the website have very much data in that particular page because infinite scroll loads some amount of data that should be visible and loads the another data whenever user scrolls at the end of the page.

<ul class="listview"></ul>
<span class="polyfill-notice">polyfill</span>
<script>
    if (!('IntersectionObserver' in window))     //IntersectionObserver api function to load content
        document.body.classList.add('polyfill');
</script>


<script src="https://cdn.rawgit.com/surma-dump/IntersectionObserver/polyfill/polyfill/intersectionobserver-polyfill.js"></script>

//include polyfill javascript by which could load content in scroll if necessary

var 
    pageSize = 10,
    sentinel = {
        el: null,
        set: function(el) {
            this.el = el;
            this.el.classList.add('sentinel');
            sentinelObserver.observe(this.el);
        },
        unset: function() {
            if (!this.el)
                return;
            sentinelObserver.unobserve(this.el);
            this.el.classList.remove('sentinel');
            this.el = null;
        }
    },
    sentinelListener = function(entries) {
        console.log(entries);
        
        sentinel.unset();
        listView.classList.add('loading');
        nextPage().then(() => {
            updateSentinel();
            listView.classList.remove('loading');
        });
    },
    updateSentinel = function() {
        sentinel.set(listView.children[listView.children.length - pageSize]);
    },
    nextPage = function() {
        return loadNextPage().then((items) => {
            listView.insertAdjacentHTML(
                'beforeend', 
                items.map(item => `
                    <li class="listview__item">
                        <span class="listview__item__id">${item.id}</span>
                        <div class="listview__item__content">
                            <p>${item.text}</p>
                        </div>
                    </li>
                `).join('')
            );
        });
    },
    loadNextPage = (function() {  //content function that will load when scroll and used in html
        var 
            pageNumber = 0,
            placeholders = [
                'Lorem Ipsum. Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum',
                'Lorem Ipsum. Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLoLorem Ipsum. Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum

            ]
        ;
        return function () {
            console.log(`Loading page #${pageNumber}`);
            return new Promise(function(resolve, reject) {
                var items = [];
                for (var id = pageNumber*pageSize, lastId = id + pageSize - 1; id <= lastId; ++id) {
                    items.push({
                        id: id,
                        text: placeholders[getRandomInRange(0, placeholders.length - 1)]
                    })
                }
                pageNumber++;
                setTimeout(function() { resolve(items); }, getRandomInRange(500, 4000));
            });
        }
    })(),
    getRandomInRange = function(min, max) { 
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    listView = document.querySelector('.listview'),
    sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1}) // threshold represents the elements area that needs to become visible to trigger the callback
;
 
nextPage().then(() => { 
    nextPage().then(updateSentinel);
});

Intersection Observer API is used for  trying to figure out the best way to detect when any element enters the viewport.Intersection Observer API is useful in  infinite scrolling, lazy loading images etc.

The script we have included polyfill in html and javascript by which  we could load the data if only ii is necessary.