Facebook Canvas 应用程序内的滚动事件

Question

我希望使用图像的 LazyLoad 技术和无限滚动来将新内容加载到我的页面中。这两件事都利用了 Facebook 画布应用程序中不起作用的 $(window).scrollTop() 函数。我知道我可以使用 FB.Canvas.getPageInfo() 来获取当前的scrollTop值，但是我遇到了一些性能问题，我的代码如下：

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);

如果我不这样做，似乎没问题不要覆盖scrollTop函数，但是一旦我这样做，我的浏览器很快就会崩溃。

我的做法完全错误吗？有人已经创建了一种在 FB 画布内执行此操作的方法吗？干杯。

Answer 1

我试图解决同样的问题，我的解决方案是 Facebook 应用程序内的附加元素（div#xscroll，pos：abs，L）+ setInterval：

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

现在您可以使用这个 #xscroll 进行 LazyLoad：

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

问题是 - FB 时 CPU 使用率巨大.Canvas.getPageInfo，我的间隔是2000 - 并且CPU使用率很高。经过一小时的脚本工作 - Safari 速度变慢并且内存泄漏......

Answer 2

您是否坚持要重写 scrollTop() 函数？最初它适用于您通过 jQuery 选择器提供的任何元素，而您似乎将其限制为仅适用于 facebook 画布。如果任何其他 JavaScript 尝试使用 scrollTop()，它都会惨败，不是吗？

至于解决方案，我已经以几乎相同的方式完成了无限滚动 - setInterval() 来查看是否已到达底部，然后加载内容，然后再次检查滚动，依此类推。但我不会随时触发窗口的原始滚动事件，因为没有必要 - 至少在我的情况下是这样。