Scroll Event inside Facebook Canvas Applications

Question

I'm looking to use a LazyLoad technique for images and infinite scroll to load new content into my page. Both these things make use of the $(window).scrollTop() function that inside a Facebook canvas application doesn't work. I know i can use FB.Canvas.getPageInfo() to get the current scrollTop value however I'm encountering some performance issues with this, my code is as follows:

var oldScroll = 0;       // current scroll 
var newScroll = null;    // new scroll (fetched from FB.Canvas)

// Override the normal function to work within fb
// !!This seems to kill the browser
$.fn.scrollTop = function() {
    return FB.Canvas.getPageInfo().scrollTop;  
};

// poll to check for any changes in scroll
setInterval(function() {
    newScroll = FB.Canvas.getPageInfo().scrollTop; 

    if(oldScroll != newScroll) {     // have we scrolled at all?
        oldScroll = newScroll;
        $(window).trigger($.Event('scroll'));   // fire a scroll event to keep the rest of the application that is listening
    }
}, 1000);

It appears to be fine if i don't override the scrollTop function but once I do my browser soon crashes.

Am i going about this completely wrong? Has someone already created a way to do this inside FB canvas? Cheers.

350D · Answer 1 · 2012-01-31T05:58:26.863

2

Im trying to solve the same problem and my solution is a additional element (div#xscroll, pos:abs, L) inside Facebook application + setInterval:

function wininfo() {
    FB.Canvas.getPageInfo(
        function(info) {
            $('#xscroll').height(info.clientHeight+info.offsetTop+info.scrollTop).trigger('scroll');
        }
    );
};

now you can use this #xscroll for LazyLoad:

$(".img").lazyload({threshold:400,effect:"fadeIn",skip_invisible:true,container:'#xscroll'});

the problem is - huge CPU usage while FB.Canvas.getPageInfo, my interval is 2000 - and CPU usage is hight. After hour of script work - Safari slows down and memoryleaked...

edited Jan 31 '12 at 05:58

answered Jan 30 '12 at 17:39

350D

11,135
5
36
49

Im just get some timer results: each FB.Canvas.getPageInfo() call takes 400-500ms! Wow! How its possible? – 350D Jan 30 '12 at 18:16
yea ive modified my answer abit to get it working properly however im again experiancing problems with CPU cycles getting eatten up. – nav Feb 01 '12 at 23:19

score 1 · Answer 2 · answered Dec 21 '11 at 13:50

1

Do you insist on having the scrollTop() function overridden? Originally it works for any element that you supply via the jQuery selector, while you seem to restrict it to only the facebook canvas. If any other javascript tries to use scrollTop(), it will fail miserably, won't it?

As for the solution, I've done infinite scrolling pretty much the same way - setInterval() to see if you've reached the bottom, then load content, then check scroll again, and so on. But I'm not triggering the original scroll event of the window at any time, as there is no need to - at least in my case.

answered Dec 21 '11 at 13:50

bububaba

2,840
6
25
29

Well considering `scrollTop()` will always return 0 inside a canvas application I thought I may as well override it as the plugins I'm using use it and it was save me going through and modifying them all. The override in my code only occurs if it detects the page is within a Canvas so outside of Facebook it works as normal. Did your infinite scroll implementation use a plugin or did you write your own? Think I may just have to heavily modify the code to make it work :S Just thought there maybe something im missing, cheers! – nav Dec 21 '11 at 14:09

Scroll Event inside Facebook Canvas Applications

2 Answers2