How to catch scroll event inside facebook canvas frame?

Question

I am trying to catch when a user scrolls canvas iframe of facebook app. I tried:

$(window).scroll(...)
$(document).scroll(...)
$(parent).scroll(...)
$(parent.document).scroll(...)

but it doesn't fire.

Answer 1

I think you mean catch when the user is scrolling the main page, not the iframe, correct?

You can't do it directly, you will have to use FB.Canvas.getPageInfo as descibed at http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/ . You can't "catch" it as an event, but you can poll the scroll values using setInterval or similar to detect when the page position has changed.

Answer 2

As @Floyd said the scroll events will not fire (assuming you are hiding the iframe scrollbars) as your App is in an iframe inside of Facebook.

You can detect the users scroll position on the page (Facebook, not your app - so it won't be completely accurate unless you take the header and floating header into account) by using FB.Canvas.getPageInfo http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/ but you have to poll the event when ever you want to check the users scroll position, so you could set it up on a timer with setInterval.

I just created a plugin for this purpose to use in one of my Facebook apps. To use it all you simply do is include the plugin after your window.fbAsyncInit function and before you load the Facebook Javascript SDK.

You can subscribe to the Facebook event "scroll" or listen to the dom event "fb-scroll" which two parameters will be passed "topPercent" and "bottomPercent" and then call your own functions based on the users scroll position.

https://github.com/kus/facebook-app-scroll-event

Example:

// Subscribe to custom Facebook event
FB.Event.subscribe('scroll', function(topPercent, bottomPercent){
    console.log('scroll', topPercent, bottomPercent);
});

// Listen to dom event with jQuery
jQuery(document).on('fb-scroll', function(evt, topPercent, bottomPercent){
    if(bottomPercent == 100){
        // load more content
    }
});

Answer 3

I think you are not allowed to do this, I guess it's similar to the "Profile Takeover" in the Prohibited Functionality section.

As far as I know, you can only change the parent URL: top.location.href