QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Facebook Style Infinite Scroll

Facebook Style Infinite Scroll

Facebook loads new posts on timeline and news feed as you scroll down. This makes Facebook home page and profile load faster as Facebook don’t have to load everything on page load. For achieving this Facebook uses a technique called as Infinite scrolling.

In this tutorial we will see how to achieve infinite scroll using pure JavaScript.

What is Infinite Scroll?

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is detecting when user reaches end of an HTML element i.e., finished reading and then loading new data asynchronous using AJAX and displaying it. Therefore the page seems to load infinitely.

Code Implementation

Here is demo code on how to detect when user reaches end of an element by scrolling

View Demo

<!doctype html>
<html>
    <head>
        <title>Infinite Scroll using JavaScript</title>
    </head>
    <body>
       
        <div id="timeline">
            <div>
                            Random text
            </div>
        </div> 

        <script type="text/javascript">
                //detects when user reaches the end
            window.addEventListener("scroll", function(){
                var wrap = document.getElementById('timeline');
                var contentHeight = wrap.offsetHeight;
                var yOffset = window.pageYOffset;
                var y = yOffset + window.innerHeight;
                if(y >= contentHeight)
                {
                    //load new content
                    wrap.innerHTML = wrap.innerHTML + "<div>Random text</div>";
                }
            })

        </script>
    </body>
</html>

Facebook always by default displays some number of posts as soon as the page loads. And then other posts are displayed as user scrolls down the page.

In the above example code we are adding some demo text into the content area as user finishes reading i.e., reaches the end of the #timeline element. Here we are directly adding some random text but in a real website you are supposed to fetch new data using AJAX and then add to the page.

Mar 15, 2015Narayan Prusty
WordPress Add Custom Post Type to ArchiveAdding Buttons to WordPress Visual Editor

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Infinite Scroll?
  • Code Implementation
Related Articles
  • Detecting End Of Scrolling In HTML Element
  • Full Screen Scrolling with Page Piling Effect
  • Full Screen Scrolling with Page Split Effect
  • Lazy Loading Images And Its SEO Impact
  • Pull To Refresh For Phonegap App
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license