FRONTEND_MVC/views/news/view/infinity_newsfeed.php

<?php
/**
 * @var $this \yii\web\View
 * @var $model \app\models\News
 */
?>
<div class="list w-100">

</div>

<script>
    let lastPostId = null;
    let targetEl = null;
    let infinityNewsAmount = 0;
    window.processInfinityNewsFeed = (el) => {
        targetEl = el;
        let targetElementVisible = false;

        window.handleInfinityNewsFeed = (e) =>
        {
            if(elementInViewport(targetEl) && !targetElementVisible){
                targetElementVisible = true;
                const request = new XMLHttpRequest();
                const url = "/news/infinity-newsfeed?last_post_id=" + lastPostId + "&post_id=<?=$model->id?>" + "&amount=" + infinityNewsAmount;
                request.open('GET', url);
                request.setRequestHeader('Content-Type', 'application/x-www-form-url');
                request.addEventListener("readystatechange", () => {
                    if (request.readyState === 4 && request.status === 200) {
                        let data = JSON.parse(request.responseText);
                        document.getElementById("infinity_newsfeed").getElementsByClassName('list')[0].insertAdjacentHTML('beforeend',data.html);
                        const scriptTmpStorage = document.createElement('div');
                        scriptTmpStorage.innerHTML = data.html;
                        const scripts = scriptTmpStorage.getElementsByTagName('script');
                        if(scripts.length > 0 ){
                            for(let i = 0;i < scripts.length; i++){
                                console.log('Evalating ' + scripts[i].innerHTML)
                                eval(scripts[i].innerHTML)
                            }
                        }
                        lastPostId = data.id;
                        infinityNewsAmount++;
                        targetElementVisible = false;
                        window.processInfinityNewsFeed(document.getElementById("post-"+data.id));
                    }
                });
                request.send();
            }
        }
    }

    let commentsElement = document.getElementById('comments');
    processInfinityNewsFeed(commentsElement);

    window.elementInViewport = (el) => {

        if(el === 'undefined') return false;
        var rect = el.getBoundingClientRect();
        return (
            rect.top > 0 &&
            (rect.top - window.innerHeight) <= 0
        );
    }
    if (window.addEventListener) {
        addEventListener('DOMContentLoaded', handleInfinityNewsFeed, false);
        addEventListener('load', handleInfinityNewsFeed, false);
        addEventListener('scroll', handleInfinityNewsFeed, false);
        addEventListener('resize', handleInfinityNewsFeed, false);
    } else if (window.attachEvent)  {
        attachEvent('onDOMContentLoaded', handleInfinityNewsFeed); // Internet Explorer 9+ :(
        attachEvent('onload', handleInfinityNewsFeed);
        attachEvent('onscroll', handleInfinityNewsFeed);
        attachEvent('onresize', handleInfinityNewsFeed);
    }
</script>