CODEWITHSUNDEEP
flashfirefoxmousewheelpreventdefaultstoppropagation
Mister Deer
Mister Deer

Reputation: 41

Scroll by mousewheel in flash only. Prevent default browser scroll by mousewheel

I find this problem after my firefox automatically updated to FF17, MAC, OSX 10.8.2.
Any suggestion and tips ?

Problem:
I use javascript preventDefault(); and stopPropagation(); to cancel the default scroll event by mouse wheel, it work fine. But when mouse over the flash object and scroll by mouse wheel, this is not working.

Indeed, I have a panel in flash which can controlled by mouse wheel. The flash object is embed in the middle of the html document, which you need to scroll down in the browser to view the flash content. When I focus on flash content and scroll by mouse wheel, the browser is also scrolling and make the flash content out of view.

Reproduce the problem:
1. Place a simple blank flash object in the very bottom in the html. Make sure you need to scroll down to view the flash object in the browser.

  1. To make it easy to explain, you can use this javascript to stop all mouse wheel activity on the page: (please press "Spacebar" to reach flash object at the very bottom in the html, if needed)

    window.addEventListener('DOMMouseScroll', wheel, false); window.addEventListener('mousewheel', wheel, false);
    window.addEventListener('MozMousePixelScroll', wheel, false); window.addEventListener('wheel', wheel, false);
    function cancelEvent(e) { e = e ? e : window.event; if (e.stopPropagation)e.stopPropagation(); if (e.preventDefault)e.preventDefault(); e.cancelBubble = true; e.cancel = true; e.returnValue = false; return false; }

  2. Mouse roll over on the flash object and use the scroll wheel, you will find the browser is also scrolling.

Expected Result:
Mouse wheel only control the flash object, but not the browser by the above script.

Upvotes: 4

Views: 2805

Answers (3)

KumoKairo
KumoKairo

Reputation: 678

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

Upvotes: 0

Skip R
Skip R

Reputation: 383

I have come across a site where that has an entire order process in a flash object but that object is a fixed size that does not fit on my laptop screen. They have disabled scrolling in and outside the flash object object, that is, the entire page. An absolutely infuriating user experience where I have to move mouse pointer to far right and use the browser scroll bar instead of a mouse wheel. Does this site "https://internetorder.dominos.com.au/estore/" (any page past main page) behave like that for you, if so, it may provide a way for you to inflict it on your users. Not that I in any way endorse this.

Upvotes: 1

xero
xero

Reputation: 4319

you'll need to use javascript to override the default mouse wheel behavior. the 1st link has lots of examples in different browsers, but i had better luck with implementation in modern IE based on the 2nd example.

http://www.stoimen.com/blog/2009/07/01/javascript-disable-mouse-wheel/

http://solidlystated.com/scripting/javascript-disable-mouse-wheel/

but i'm not really sure why you need this. if you make you flash application the same size as the screen and scale the inner content there's no way to scroll the page. just set the width and height of your flash to 100%

Upvotes: 0

Related Questions