How to stop simultaneous browser and SWF mouse wheel scrolling in AS3?

Question

Essentially, I have flash content that scrolls on mouse wheel. It works fine, unless there is other content in the browser such that the browser's scrollbar is enabled - when that is the case, both the browser window AND my SWF scroll on mouse wheel. Is there any way to correct this behavior?

Similar question asked here:

disable mouse wheel scrolling while cursor over flex app?

which references the solution blogged about here:

http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/

But the solution does not work on all browsers! While it works on some Windows browsers, it doesn't work at all on Mac OS X - it registers mouse wheel events in Firefox, but they are not getting fired at all in Chrome and Safari.

Now I know that (per the official Adobe InteractiveObject docs) mouse wheel is supposedly only supported on Windows systems, but the event is still fired by default on Mac OS X. Is this simultaneous scroll bug the reason it is not supported?

Edit: adding more info on above solution...

Note that the above solution basically uses ExternalInterface to send the following JavaScript to the "eval" function:

var browserScrolling;

function allowBrowserScroll(value) {
    browserScrolling = value;
}
function handle(delta) {
    if (!browserScrolling) {
        return false;
    }
    return true;
}
function wheel(event) {
    var delta = 0;
    if (!event) {
        event = window.event;
    }
    if (event.wheelDelta) {
        delta = event.wheelDelta / 120;
    } else if (event.detail) {
        delta = -event.detail / 3;
    }
    if (delta) {
        handle(delta);
    }
    if (!browserScrolling) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        event.returnValue = false;
    }
}
if (window.addEventListener) {
    window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
allowBrowserScroll(true);

Is this cat at least on the right path, or is there a better (i.e. fully functional) solution?

Osteomalacia

Answer 1

I created a small lib that handles everything for you. It works perfect (as far as I tested) on default flash player plugin, on Pepper flash and on MAC-OS. And you don't need to add any .js files to your HTML folder

GIhub repo

Callie

Answer 2

You should be able to do this entirely via javascript ...

First off you need to listen to "wheel", "mousewheel" and also to "DOMMouseScroll". It appears DOMMouseScroll is for Firefox only .....

Secondly -- it might be a little bit better to do this entirely in javascript:

// pseudo-code -- this tests for all "Objects" using not-so-standard elementFromPoint;
// You can also look for the element directly using id
    var fn = function(e) {
        var element = document.elementFromPoint(e.pageX, e.pageY);
        if (element && element.tagName === 'OBJECT') {
            e.preventDefault();
            e.stopPropagation();
        }
    }

    window.addEventListener('DOMMouseScroll', fn);
    window.addEventListener('mousewheel', fn);

Donough

Answer 3

You may need to test the variations of scroll and mousewheel to access the Webkit events. See here.

Unman

Answer 4

I believe you will have to hook the event in JS on the page, then prevent default, and send the event(delta) to your flash. The code you posted looks like it is setting that up somewhat (preventing default) yet I do not see where the code is hooking the DOM.

Metropolitan