Analysis and treatment of scroll bars in both HTML and embedded Flash

We often encounter this situation when doing development:
a.swf is added to the web page. There are scroll bars on both a.swf and html pages. The project manager proposed a BT requirement --- when the mouse scrolls a.swf, the html page does not scroll, otherwise the html page scrolls!
What should be done?
Method 1 :
1. When the mouse moves into the scrolling area of a.swf: tell JS to remove the browser mouse scrolling monitor.
2. When the mouse moves out of the scrolling area of a.swf: tell JS to add a browser mouse scroll listener.
3.a.swf's wmode is set to "window".
Summary: Setting wmode to "window" may not meet project requirements, which makes a.swf cover any html page below it; in addition, when the mouse moves into the scrolling area of a.swf and presses Alt+Tab to switch pages, JS is not notified to add browser mouse scrolling monitoring, so after the operation, there is no scrolling processing when switching back to the html page

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 scrolling area of a.swf: inform JS, for example, mouseIsInFlashWheelRange=true.
3. When the mouse moves out of the scrolling area of a.swf: inform JS, for example, mouseIsInFlashWheelRange=false;
4.JS monitors mouse scroll events. In the event monitoring 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, value is the scroll value of HTML scroll table*/
document.getElementById("flashID").wheelToFlash(value);
/**Prevent bubbling of mouse events on HTML pages, usually event.preventDefault()*/
event.preventDefault();
}
else
{
/**Handle normal scrolling of HTML, we don't need to do anything*/
}

Summary : Compared with method 1, there is no restriction of wmode="window"; the Alt+Tab problem still exists.
Note : When writing JS code, we need to pay attention to compatibility issues. Different browsers listen to mouse events and obtain scroll values differently!

<<: Detailed explanation of Linux using ss command combined with zabbix to monitor socket

>>: Implement QR code scanning function through Vue

Vue uses v-model to encapsulate the entire process of el-pagination components

Analysis and treatment of scroll bars in both HTML and embedded Flash

Vue uses v-model to encapsulate the entire process of el-pagination components

CSS uses the autoflow attribute to achieve seat selection effect

Detailed explanation of map overlay in openlayers6

Vue realizes click flip effect

Encapsulate a simplest ErrorBoundary component to handle react exceptions

mysql 5.7.11 winx64 initial password change

How to sort a row or column in mysql

Detailed explanation of JavaScript axios installation and packaging case

Sharing of experience on repairing MySQL innodb exceptions

Mysql uses stored procedures to quickly add millions of data sample code

Recommend

Gojs implements ant line animation effect

Linux Centos8 Create CA Certificate Tutorial

Docker container exits after running (how to keep running)

Solve the problem of Navicat for Mysql connection error 1251 (connection failed)

How to use nginx to build a static resource server

Pure CSS to achieve the text icon function by taking the first character of the string

Detailed steps to configure MySQL remote connection under Alibaba Cloud

Solve the problem of data synchronization when vue-seamless-scroll scrolls and likes

A brief discussion on VUE uni-app conditional coding and page layout

MySQL green decompression version installation and configuration steps

Solution to the problem of large font size on iPhone devices in wap pages

Sample code for implementing the history tag menu using vue+elementui+vuex+sessionStorage

Example verification MySQL | update field with the same value will record binlog

Windows platform configuration 5.7 version + MySQL database service

Detailed explanation of JavaScript private class fields and TypeScript private modifiers