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
Recommend
element-ui Mark the coordinate points after uploading the picture
What is element-ui element-ui is a desktop compon...
Using cursor loop to read temporary table in Mysql stored procedure
cursor A cursor is a method used to view or proce...
Ideas and codes for implementing iframe to intercept part of the website content
Copy code The code is as follows: <div style=&...
HTML web page creation tutorial Use iframe tags carefully
Using iframes can easily call pages from other we...
Example analysis of mysql non-primary key self-increment usage
This article uses an example to illustrate the us...
Pure CSS3 code to implement a running clock
Operation effectCode Implementation html <div ...
ElementUI implements the el-form form reset function button
Table of contents Business scenario: Effect demon...
How to solve the problem "Unknown column 'password" when resetting MySQL root password
When I turned on my MAC at night, I found that th...
Detailed explanation of the use of MySQL select cache mechanism
MySQL Query Cache is on by default. To some exten...
DIV common tasks (Part 1) — General tasks (show scrollbars/hide divs/disable event bubbling, etc.)
As the most commonly used layout element, DIV play...
Native js to implement 2048 game
2048 mini game, for your reference, the specific ...
JavaScript to achieve magnifying glass effect
This article shares the specific code for JavaScr...
The whole process of realizing website internationalization using Vite2 and Vue3
Table of contents Preface Install vue-i18n Config...
Nginx access control and parameter tuning methods
Nginx global variables There are many global vari...
Detailed explanation of the background-position percentage principle
When I was helping someone adjust the code today,...