Understanding JavaScript Scrolling & iFrames

StackOverflow https://stackoverflow.com/questions/16302789

Question

THE PROBLEM

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.

THE QUESTION

I know that the my game content within the FB app's iframe can not directly tap the App html page. So trying to set properties on the FB page are pointless. But I was thinking, is there a way to catch a scroll event on my game content and stop it from reaching the wrapping FB page?

I do not understand the DOM well enough to know if this is possible. I am thinking like a Flash developer in that we can stop event propagation. I just don't know in what direction or from what DOM element the scroll event would originate.

Was it helpful?

Solution

OK I solved this (I think)...

The reason I wasn't able to stop the scrolling of the FB app was because if the canvas is fluid, then the content will not have overflow? and not trigger scroll events. It WILL however trigger mousewheel events which are necessary steps in generating the scroll event via the mouse.

I added code to my content div whereby I listen for the mousewheel event. I then cancel that event & stop it from propagating to the iFrame's owner.

<html>
<head>
    <script type="text/javascript">
        function init () 
        {
            //window.addEventListener('scroll', listener, false);
        }

    </script>
</head>

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

        function onScrollHandler(event)
        {
            event.preventDefault();
            event.stopPropagation();

            //alert("scrolling");       
        }

    </script>

    <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
    </div>
</body>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top