HTML and embedded flash both have scroll bar situation analysis and processing method

Time:2021-2-24

We often encounter this situation when we do development:
a. Swf is added to the web page, a.swf and HTML pages have scrollbars at the same time, the project manager put forward a BT requirement — when dealing with a.swf mouse scrolling, the HTML page does not perform scrolling, otherwise, the HTML page will perform scrolling!
What should we do?
Method 1:
1. When the mouse moves into the a.swf scrolling area: inform JS to remove the browser mouse scrolling monitoring
2. When the mouse moves out of the a.swf scrolling area: inform JS to add browser mouse scrolling monitoring
3. Wmode of a.swf is set to “window”
Conclusion: setting wmode to “window” may not meet the needs of the project, which makes a.swf block any HTML page under it; in addition, when the mouse moves into the a.swf scrolling area and presses Alt + tab to switch the page, JS is not informed to add browser mouse scrolling monitoring, so there is no scrolling processing when switching back to the HTML page after the operation

Method 2:
1. A.swf cancels its own mouse scrolling monitoring event and adds a scrolling processing interface for JS to call, such as wheeltoflash (value)
2. When the mouse moves into the a.swf scrolling area: inform JS, for example, mouseis inflashwheelrange = true
3. When the mouse moves out of the a.swf scrolling area: inform JS, for example, mouseis inflashwheelrange = false;
4. JS monitors mouse rolling events. In the event monitoring and processing function, we need to make the following judgments
Javascript code:

Copy code

The code is as follows:

if(mouseIsInFlashWheelRange==true)
{
/**Call the interface provided by a.swf to make a.swf simulate scrolling*/
/**”Flash” is the ID of a.swf embedded in HTML, and value is the value of HTML scrolling table*/
document.getElementById(“flashID”).wheelToFlash(value);
/**To prevent mouse events from bubbling on HTML pages, usually event.preventDefault ()*/
event.preventDefault();
}
else
{
/**With normal scrolling, we can do nothing*/
}

summary: compared with method 1, there is no wmode = “window” restriction; the problem of ALT + Tab still exists.
be careful: when we write JS code, we need to pay attention to compatibility. Different browsers monitor mouse events and get scrolling values differently!