Question

Is it possible to disable mousewheel scrolling on my webpage while the cursor is over my flex application?

My flex application is a map that allows user to zoom in and out using the mousewheel; however, when I put my flex app onto my webpage, the scrollwheel causes the page to scroll instead of zooming in and out…

Edit:

I have added sounds to my flex app and it tells me my mouse events are correct. I have also added an alertbox to the javascript so that I know the MyApp.initialize function is being called but the mousewheel is still scrolling the webpage instead of my flex app. This is the code I’m using and it isn’t locking the scrollbar when I am on top of my flex application:

var bname;
var MyApp = {
   initialize : function() {  

      this.debugging = true;
      this.busyCount = 0;
      this._debug('initialize');
      bname = navigator.appName;
      //alert(bname + ‘ is browser’);
      document.getElementById('flashDiv').onload = this.start;
      if(window.addEventListener)/** DOMMouseScroll is for mozilla. */
      window.addEventListener('DOMMouseScroll', this.wheel, false);

      /** IE/Opera. */
      window.onmousewheel = document.onmousewheel = this.wheel;
      if (window.attachEvent) //IE exclusive method for binding an event
     window.attachEvent("onmousewheel", this.wheel);
      }
   , start : function() {
      window.document.network_map.focus();
      }
   , //caputer event and do nothing with it.
   wheel : function(event) {
      if(this.bname == "Netscape") {
         // alert(this.bname);
         if (event.detail)delta = 0;
         if (event.preventDefault) {
            //console.log(’prevent default exists’);
            event.preventDefault();
            event.returnValue = false;
            }
         }
      return false;
      }
   , _debug : function(msg) {
      if( this.debugging ) console.log(msg);
      }
   }; 

I have got to be missing something!?

Answer 1

This applies to AS3 flex/flash. Use the following code to allow mousewheel controls within flex/flash swf. it will scroll browser when mouse cursor is outside of flex/flash swf.

package com.custom {

import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

/**
 * MouseWheelTrap - Simultaneous browser/Flash mousewheel scroll issue work-around
 * @version 0.1
 * @author Liam O'Donnell
 * @usage Simply call the static method MouseWheelTrap.setup(stage)
 * @see http://www.spikything.com/blog/?s=mousewheeltrap for updates
 * This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 * (c) 2009 spikything.com
 */

public class MouseWheelTrap {

    static private var _mouseWheelTrapped :Boolean;

    public static function setup(mainStage:Stage):void {

        mainStage.addEventListener(MouseEvent.ROLL_OVER, function():void{ 
            allowBrowserScroll(false); 
            }
        );

        //i added 'mx.core.FlexGlobals.topLevelApplication.'making it work better for flex. use 'stage' for flash   
        mainStage.addEventListener(MouseEvent.ROLL_OUT, function():void{ 
            allowBrowserScroll(true); 
            }
        );
    }

    private static function allowBrowserScroll(allow:Boolean):void
    {
        createMouseWheelTrap();
        if (ExternalInterface.available){
            ExternalInterface.call("allowBrowserScroll", allow);
        }
    }
    private static function createMouseWheelTrap():void
    {
        if (_mouseWheelTrapped) {return;} _mouseWheelTrapped = true; 
        if (ExternalInterface.available){
            ExternalInterface.call("eval", "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);");
        }
    }
  }
}

Within your main flash document “frame 1 or where ever” or in your main flex mxml file, place the following:

import com.custom.MouseWheelTrap;
MouseWheelTrap.setup(stage);

you may visit the website where I stumbled upon this by visiting the following URL:
http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/

A weeks worth of work finally solved in 5 minutes…gotta love programming!