Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 699
Sensei James Avatar asked Dec 19 '11 21:12

Sensei James


2 Answers

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

like image 152
KumoKairo Avatar answered Nov 09 '22 23:11

KumoKairo


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);
like image 28
ansiart Avatar answered Nov 09 '22 23:11

ansiart