Creating Facebook like dynamic content load on page scroll is fairly easy. You have to detect desired scroll position and then ask for content via AJAX. Below is the required code.

<script type="text/javascript">
        function hookScroll(target, percent, callback) {
            $(target).bind('scroll', function () {
                if ((($(target).scrollTop() /
                                   $(target).innerHeight()) * 100)
                                   >= percent) {
                    callback();
                }
            });
        }

        function callback() { /* AJAX call to load content */ }

        hookScroll(document, 40, callback);
</script>

In above code I have handled scroll event of target element and check whether scrolled height is greater than of equal to required percent, if yes than execute the callback function.

Please let me know if you have any questions related to above code, use comment box for the same.

Share It

• Tweet