topic Re: Disable browser scrolling when using map. in ArcGIS API for Flex Questions

Disable browser scrolling when using map.

JasonLevine — Sat, 11 Dec 2021 08:25:23 GMT

Hello All,
If you've ever embedded a flex map into a browser, you've probably noticed that when you use the scroll wheel to zoom in or out, you also scroll the browser window as well. I was looking for a way to disable the browser window scrolling when you're over the map when I found MouseWheelTrap. Basically, you copy the following class package into your project, and then call for it in your main.mxml:

package com.esri.ags.script 
{
 import flash.display.Stage;
 import flash.errors.IllegalOperationError;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.external.ExternalInterface;
 
 /**
  * MouseWheelTrap - stops simultaneous browser/Flash mousewheel scrolling
  * @author Liam O'Donnell
  * @version 1.0
  * @usage Simply call the static method MouseWheelTrap.setup(stage);
  * @see http://www.spikything.com/blog/?s=mousewheeltrap for info/updates
  * This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
  * Â© 2009 spikything.com
  */
 public class MouseWheelTrap
 {
  static private const JAVASCRIPT :String = "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;if(window.opera){delta=-delta;}}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);";
  static private const JS_METHOD :String = "allowBrowserScroll";
  static private var _browserScrollEnabled :Boolean = true;
  static private var _mouseWheelTrapped :Boolean = false;
  private const INSTANTIATION_ERROR :String = "Don't instantiate com.spikything.utils.MouseWheelTrap directly. Just call MouseWheelTrap.setup(stage);";
  
  public function MouseWheelTrap()
  {
   throw new IllegalOperationError(INSTANTIATION_ERROR);
  }
  
  /// Sets up the Flash and the browser to deal with turning browser scrolling on/off as the mouse cursor enters and leaves the stage (a valid reference to stage is required)
  static public function setup(stage:Stage):void 
  {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, function(e:* = null):void { allowBrowserScroll(false); } );
   stage.addEventListener(Event.MOUSE_LEAVE, function(e:* = null):void { allowBrowserScroll(true); } );
  }
  
  static private function allowBrowserScroll(allow:Boolean):void
  {
   createMouseWheelTrap();
   
   if (allow == _browserScrollEnabled)
    return;
   _browserScrollEnabled = allow;
   
   if (ExternalInterface.available) {
    ExternalInterface.call(JS_METHOD, _browserScrollEnabled);
    return;
   }
  }
  
  static private function createMouseWheelTrap():void
  {
   if (_mouseWheelTrapped) 
    return;
   _mouseWheelTrapped = true;
   
   if (ExternalInterface.available) {
    ExternalInterface.call("eval", JAVASCRIPT);
    return;
   }
  }
  
 }
 
}

Then you call it in your main.mxml with:

import com.esri.ags.script.MouseWheelTrap;
MouseWheelTrap.setup(stage);

This seems pretty straightforward, but I get the error, "1120: Access of undefined property stage" when I compile. There must be a simple fix to this that I'm not getting... Any Ideas?

Thanks for your help.

Re: Disable browser scrolling when using map.

DasaPaddock — Tue, 30 Nov 2010 19:39:21 GMT

Here's another solution:
http://forums.esri.com/Thread.asp?c=158&f=2421&t=274624#871027

Re: Disable browser scrolling when using map.

RobertScheitlin__GISP — Tue, 30 Nov 2010 19:39:53 GMT

Jason,

Have you tried

MouseWheelTrap.setup(parentApplication.stage);

Re: Disable browser scrolling when using map.

JasonLevine — Tue, 30 Nov 2010 20:03:08 GMT

Hi Robert,
When I try that, I get "Access of undefined property parentApplication".

-Jason

Re: Disable browser scrolling when using map.

RobertScheitlin__GISP — Tue, 30 Nov 2010 20:06:59 GMT

Jason,

Strange... you said you are putting this in the main.mxml which is the main application right?

Well you could try this but it is basically the same thing:

MouseWheelTrap.setup(this.parentApplication.stage);

Re: Disable browser scrolling when using map.

JasonLevine — Tue, 30 Nov 2010 20:14:21 GMT

Robert,
This gives the error "1042:The this keyword can not be used in static methods. It can only be used in instance methods, function closures, and global code."

Yes, this is in the Main.mxml file which contains the map.

-Jason

Re: Disable browser scrolling when using map.

RobertScheitlin__GISP — Tue, 30 Nov 2010 20:18:00 GMT

Jason,

Can you attach you main.mxml? sounds like you are trying to use the code outside a function which is not allowed.

Re: Disable browser scrolling when using map.

JasonLevine — Tue, 30 Nov 2010 20:44:08 GMT

Hi Robert,
Attached is my Main.mxml. You're right, I was using it outside a function. I created a creationcomplete function with it and although it compiled, it didn't work.

Thanks for your help,
Jason

Re: Disable browser scrolling when using map.

JasonLevine — Sat, 11 Dec 2021 08:25:26 GMT

I gave up on getting this to work and found an effective workaround:

Place the following code in the HEAD of your html page that has the embedded swf file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
    dojo.addOnLoad(function() {
        var obj = dojo.byId("myId");
        if (obj) {
            var connection = dojo.connect(obj, dojo.isMozilla ? "DOMMouseScroll" : "onmousewheel", dojo.stopEvent);
            dojo.addOnWindowUnload(function() { dojo.disconnect(connection); }); // cleanup
        }
    });
</script>

It works pretty well.

-Jason

Re: Disable browser scrolling when using map.

RobertScheitlin__GISP — Fri, 03 Dec 2010 01:37:29 GMT

Jason,

Glad to hear that you got this worked out. I will make a mental note of this solution that worked.

Re: Disable browser scrolling when using map.

JohanMeijer — Fri, 08 Feb 2013 08:58:02 GMT

Hi,

Should the javascript implementation also work on the flexviewer (we are still using V2.4) when embedded via an I-frame into another website, like: http://www.pbl.nl/en/roadsfromrio/trends-in-biodiversity-loss

Do I need to change the "myId" value to flashcontent?

For some reason the browser keeps scrolling...

I also can't get the MouseWheelTrap flex variant in action. Like JALevine mentions: it compiles without error, but no change in the website.

Any help appreciated!

Johan

Re: Disable browser scrolling when using map.

AaronNash1 — Sat, 11 Dec 2021 08:25:28 GMT

I was able to get mouse trap working, not in the flexviewer but in an Iframe with a simple map. Displayed is the actionscript file, and just initialize this function on startup

   private function init():void
   { 
    MouseWheelTrap.setup(stage);
   }

package com.sample 
{
 
 import flash.display.Stage;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.external.ExternalInterface;
 import mx.core.Application;
 import mx.core.mx_internal;
 
 /**
  * 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 {
  
  mx.core.FlexGlobals.topLevelApplication.addEventListener(MouseEvent.ROLL_OVER, function():void{ 
   allowBrowserScroll(false); 
  }
  );
  
  //i added 'mx.core.FlexGlobals.topLevelApplication.'making it work better for flex. use 'stage' for flash  
  mx.core.FlexGlobals.topLevelApplication.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);");
  }
 }
}
}

I tried using the javascript, it worked when the map was embedded on the page but not when the map was in an iframe.