CODEWITHSUNDEEP
javascriptjqueryeventsfirefoxscroll
Ggilmann
Ggilmann

Reputation: 79

Can't listen to DOMMouseScroll on Window in Firefox

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.

Upvotes: 0

Views: 4829

Answers (4)

Fabian
Fabian

Reputation: 301

Just seeing a similar issue and using 

onwheel

instead of 

onDomMouseScroll

could solve my problem.

Upvotes: 1

Hamid Reza
Hamid Reza

Reputation: 1

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.

Upvotes: 0

Ggilmann
Ggilmann

Reputation: 79

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

Upvotes: 1

sethetter
sethetter

Reputation: 576

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

Upvotes: 1

Related Questions