Question

Loading new content in a HTML page when users reach the bottom is quite popular (FB, G+, Twitter), so I want to implement that in XPages (which uses Dojo) too. Looking on SO (and close by) I find questions around JQuery and/or generic here and here and here and here and here and here and here and here and here and here, just to name a few.

But how would one do that in Dojo?

Answer 1

Unfortunately I can’t comment on Niklas’ answer, but his answer is correct. The one thing I would change is to issue a Dojo event in the case where you’ve scrolled to the bottom instead of calling a specific function.

var scrollingDetector = (function() {
    var max = calculateScrollHeight();

    return function(){
        if (max < window.pageYOffset) {   
            max = calculateScrollHeight();
            dojo.publish('/newsApp/onScrollBottom');
        }
    }
    function calculateScrollHeight(){
        return (document.documentElement.scrollHeight - document.documentElement.clientHeight) - 80; 
    }
})();   

setInterval(scrollingDetector, 500);    

(I also took the liberty of refactoring slightly in the interest of performance, as we only need to recalculate the height when we hit the bottom of the page).

This will allow you to hook into this event elsewhere in your code without having to edit this snippet or override the onMoreButtonClick() function.