Load new content when user scrolls to the bottom using Dojo?

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?

`just to name a few.` That does not seem `a few` to me! – Derek 朕會功夫 May 09 '12 at 04:08 — Derek 朕會功夫, May 09 '12 at 04:08

score 4 · Answer 1 · edited May 09 '12 at 10:22

I don't know how Dojo does it but you can do it with plain JavaScript DOM API.

I've done this in the mobile controls. Check out MobileControlsLite.nsf (mView.xsp and mobileControls.js) from http://www.openntf.org/Projects/pmt.nsf/downloadcounter?openagent&project=XPages%20Mobile%20Controls&release=4.5.0&unid=2D4F47CB07AAEE4086257887004ED6C5&attachment=MobileControls450.zip

Here are some snippets from my app:

function scrollingDetector() {
    ...

    var pos = window.pageYOffset;
    var max = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    if (max - 80 < pos) {   
        onMoreButtonClick(...);
    }
}   

setInterval(scrollingDetector, 500);

Thx. Now the task on my list: "auto expanding view control" – stwissel May 11 '12 at 04:43 — stwissel, May 11 '12 at 04:43

score 2 · Accepted Answer · answered May 10 '12 at 09:51

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.

Load new content when user scrolls to the bottom using Dojo?

2 Answers2