How to create website page where content will load automatically after every page scroll?

 


We can achieve this by using "scroll" event listener where callback function checks if scroll position is near the end of the page then it will load more content. Below is the code snippet:

<html>
<style>
    .container>div {
        min-height: 40px;
    }
</style>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
    </div>
    <script>
        window.addEventListener("scroll", function () {
            var el = document.querySelector(".container");
            if (el.scrollTop + el.offsetHeight > el.scrollHeight - 300) {
                console.log("Load more...")
            }
        })
    </script>
</body>
</html>

 


Related #tags:     #html     #css     #javascript     #function    

Related questions




Looking for change? Click below to prepare for technical interview.


Technical Interview Questions