0

I'm experiencing quite a problem related with the mousewheel (DOMMouseScroll) event with firefox. I've got a header div, a content div and a footer div. I want the user to be able to scroll the page while on the header and footer but not while on the content because it has a map object (flash object) and the mouse wheel should zoom in and zoom out.

I'm using jQuery 1.8 and Firefox 15.0.1. I've spent pretty much all day trying to figure this out and it seems to me that this should work :

var isFireFox = (navigator.userAgent.indexOf('Firefox') != -1); 
var scrollEv = (isFireFox)? 'DOMMouseScroll' : 'mousewheel';

$(document).on(scrollEv, HandleScroll);

function HandleScroll(e)
{
    var sender = event.srcElement;

    alert(sender.id + " has sent event: " + e.type);

    if (sender.id == "viewerContent" || sender.id == "mapObject")
    {
        alert("Event is being blocked");
        e.stopPropagation();
        e.preventDefault(); 
    }
}

I've read countless posts, threads and blogs and everything I read say this should work in IE, Chrome and Firefox. Of course, it doesn't work in FireFox. It doesn't even enter the "HandleScroll" function. Also, I think it should even be possible to do something more simple, like this :

$('#viewerContent').on(scrollEv, false);
$('#mapObject').on(scrollEv, false);

Have I overlooked something simple or what?

Thanks for the help,

Ggilmann

Added :

Following Fabrício Matté's suggestion, I also tried this :

$('#viewerContent').scroll(HandleScroll);
$('#mapObject').scroll(HandleScroll);

And this :

$('#viewerContent').on('scroll', HandleScroll);
$('#mapObject').on('scroll', HandleScroll);

To no avail!

Added again :

jcubic suggested I use the plugin on this page : github.com/brandonaaron/jquery-mousewheel

I'm not too sure how it works, am i supposed to simply include the script in my page via a script tag then call the one of the methods as shown in the example on the link provided?

Thanks

Further Addition :

I got the plugin working, it was quite easy. However this does not solve my problem. It does works for a standard div but it doesn't seem to work for a div containing flash content. I'm starting to think this is a flash or firefox bug as maybe detailed here : http://cookbooks.adobe.com/post_Workaround_to_support_mouse_wheel_for_FireFox_with-13086.html

If anyone could confirm this, I would appreciate it.

Another solution that doesn't work:

Following the suggestion made by sethetter I tried this:

var isOverContent;

$('#viewerContent').on('mouseover', function(){isOverContent = true;});
$('#viewerContent').on('mouseout', function(){isOverContent = false;});

document.onscroll = HandleScroll;

function HandleScroll(e)
{       
    if (isOverContent)
    {               
        console.log("Tried to block event");
        e.stopPropagation();  // Apparently, the "scroll" event cannot be prevented or canceled.
        e.preventDefault(); 
    }
}

This allows me to detect when the user scrolled over the viewerContent in FireFox. However, the prevent default and stop propagation event do not work. The page keeps on scrolling.

Ggilmann
  • 79
  • 1
  • 12
  • Did you try `$('#viewerContent').on('scroll', handler)` / `$('#viewerContent').scroll(handler)`? Of course, if you want to actually cancel the scroll event, that'd be just plain annoying for the user, but `e.preventDefault()` should theoretically work. – Fabrício Matté Oct 03 '12 at 19:39
  • Just tried it, no success. The alerts don't pop up. – Ggilmann Oct 03 '12 at 19:47
  • For an event like this, try not to alert, and instead use something like console.log or append something to an output div for testing. – Ian Oct 03 '12 at 19:48
  • Yeah, It does get annoying when it works! Good tip for the console.log. Still need a solution though! – Ggilmann Oct 03 '12 at 19:50
  • There is jquery plugin for that, https://github.com/brandonaaron/jquery-mousewheel – jcubic Oct 03 '12 at 20:16
  • Yeah, I saw that page, but I'm not too sure how to make it work... Ill look into it in more details tommorrow morning. Basically, am I supposed to just include the js file as a script to my page then call the method as shown in the example on the link you provided? – Ggilmann Oct 03 '12 at 20:58
  • So I tried that plugin, it also would not work. However, I did manage to make it work on an empty div. I'm starting to suspect that firefox has a problem with dispatching or listening to the DOMMouseScroll event in a div that has flash content. – Ggilmann Oct 04 '12 at 12:58
  • 1
    Mouse events will only fire within the Flash environment itself - and not travel back to the browser - obviously depending on the browser. You can sometimes avoid this by changing the flash wmode param to `opaque`. This means that the browser tries to render the Flash window as part of the actual page - there can be side-effects to this for your Flash content however. http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Using_Window_Mode__wmode__values_ – Pebbl Oct 04 '12 at 13:13
  • Just to confirm, this opaque parameter should be set when embedding the SWF right (swfobject.embedSWF(...)) ? If so, I just tried it and it did not work. – Ggilmann Oct 04 '12 at 13:24

4 Answers4

1

According to this page (http://bytes.com/topic/javascript/answers/160971-window-onscroll-firefox) you can try window.onscroll = scrollHandler; Give that a shot.

sethetter
  • 576
  • 5
  • 11
  • This was a fair guess, before the OP edited to explain that the real problem is the use of a Flash element on the page. With the addition of that new info, this is no longer a good answer. (But feel free to edit or post a new answer based on the new info!) – apsillers Oct 04 '12 at 13:27
  • Actually, it seems that with a combination of mouseover/mouseout on the viewerContent, I can detect when the user scrolled over the flash content or not. Now I just have to figure out how to stop the page scrolling from happening – Ggilmann Oct 04 '12 at 14:03
  • See original post I'll add my current solution – Ggilmann Oct 04 '12 at 14:04
1

Building on sethetter suggestion, I ended up writing this:

<script type="text/javascript">
  var isFireFox = (navigator.userAgent.indexOf('Firefox') != -1);   

  if (!isFireFox)
  {
      $('#viewerContent').on('mousewheel', false);
      $('#mapObject').on('mousewheel', false);
  }     
  else if (isFireFox)
  {
    var isOverContent;                                                   
    var lastPosY;

    $('#viewerContent').on('mouseover', function(){isOverContent = true;});
    $('#viewerContent').on('mouseout', function(){isOverContent = false;});

    window.onscroll = HandleScroll;
  }

  function HandleScroll(e)
  { 
    if (isOverContent)
    {                   
      $(window).scrollTop(lastPosY);    
    }
    else
    {
      lastPosY = $(window).scrollTop();
    }
  }
</script>

It's not pretty but it works in firefox and other browsers. It does give off a kind of glitching effect when scrolling on the flash object but it keeps the user from scrolling the page . Furthermore, it seems the glitchy effect is least apparent in firefox so I kept the better solutions for IE and Chrome.

Since sethetter set me on the right path, I marke his answer as the solution.

Cheers!

Ggilmann

Ggilmann
  • 79
  • 1
  • 12
1

Just seeing a similar issue and using 

onwheel

instead of 

onDomMouseScroll

could solve my problem.

Fabian
  • 301
  • 3
  • 7
0

I find a solution in firefox+jquery mousewheel scroll event bug it worked.

check it by this code:

$(document).bind("mousewheel DOMMouseScroll", function (e) {
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            alert(delta);
            return false;
        });

good luck.

Community
  • 1
  • 1
Hamid Reza
  • 1
  • 1