explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Scrolling, iFrames & Facebook Apps

1 Comment


I have a Flash SWF being loaded into a PHP page that then is being loaded into a Facebook canvas. The FB page has content in the right side ad area that creates a vertical scroll bar regardless of the height of my game content. My game’s canvas has a fluid height in order to fully fill the content area of the canvas

There is a zoom feature in my game that is triggered by the mouse wheel.

When using the mouse wheel (to zoom in my game), this is also getting picked up by the browser to scroll the content. So I’m getting a simultaneous zoom/scroll effect going on which is undesirable to say the least.

original Stackoverflow post – http://stackoverflow.com/questions/16302789/understanding-javascript-scrolling-iframes


If  the FB canvas content has no overflow, then it will not trigger scroll events via the mouse.  It will however trigger mouse wheel events, which are necessary for triggering the scroll events via the mouse.  By cancelling and stopping the propagation of the mousewheel event, you are stopping that event from reaching into the non-iFrame content owned by Facebook.

    <script type="text/javascript">
        function init () 


<body onload="init()">
    <script type="text/javascript">

        function onScrollHandler(event)



    <div id="content" onmousewheel="onScrollHandler(event)" onclick="alert('click')" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color:#b0c4de;">
        content area

If you’d like to test this yourself, set up a FB app and use this as your app’s content HTML.


One thought on “Scrolling, iFrames & Facebook Apps

  1. Pingback: Scrolling, iFrames & Facebook Apps | explorers' club |

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s