How to catch scroll event inside facebook canvas frame?

Question

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

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

but it does not work.

Answer 1

I think you mean the trick when the user scrolls the main page, not the iframe, right?

You cannot do this directly, you will need to use FB.Canvas.getPageInfo as descibed at http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/ . You cannot “catch” it as an event, but you can poll the scroll values ​​using setInterval or similarly detect when the page position has changed.

Answer 2

As @Floyd said, scroll events will not fire (if you hide the iframe scroll bars), since your application is in the iframe inside Facebook.

You can determine the scroll position of users on the page (Facebook, not the application) so that it is not completely accurate if you do not take into account the title and the floating title) using FB.Canvas.getPageInfo http://developers.facebook.com/docs /reference/javascript/FB.Canvas.getPageInfo/ , but you should poll this event when you want to check the scroll position of users so that you can set it using a timer with setInterval .

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

You can subscribe to the Facebook event “scroll” or listen to the dom event “fb-scroll”, in which two parameters “topPercent” and “bottomPercent” will be passed, 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 that you are not allowed, I think it looks like a “profile capture” in Prohibited functionality .

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