HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理

開発を行う際に、次のような状況に遭遇することがよくあります。
a.swf が Web ページに追加されます。a.swf ページと html ページの両方にスクロールバーがあります。プロジェクトマネージャーは、BT 要件を提案しました。マウスで a.swf をスクロールすると html ページはスクロールしませんが、それ以外の場合は html ページがスクロールします。
何をすべきでしょうか?
方法1 :
1. マウスが a.swf のスクロール領域に移動すると、ブラウザのマウススクロールモニターを削除するように JS に指示します。
2. マウスが a.swf のスクロール領域から外れたとき: ブラウザのマウススクロールリスナーを追加するように JS に指示します。
3.a.swf の wmode は「window」に設定されます。
要約: wmode を「window」に設定すると、プロジェクトの要件を満たさない可能性があり、a.swf がその下の HTML ページを覆います。さらに、マウスが a.swf のスクロール領域に移動し、Alt + Tab を押してページを切り替えると、JS にブラウザのマウススクロール監視を追加するように通知されないため、操作後、HTML ページに戻るときにスクロール処理が行われません。

方法2 :
1. a.swf は、独自のマウススクロール監視イベントをキャンセルし、wheelToFlash(value) など、JS が呼び出すスクロール処理インターフェイスを追加します。
2. マウスが a.swf のスクロール領域に移動したとき: JS に通知します (例: mouseIsInFlashWheelRange=true)。
3. マウスが a.swf のスクロール領域から外れたとき: JS に通知します (例: mouseIsInFlashWheelRange=false;)。
4.JSはマウススクロールイベントを監視します。イベント監視処理機能では、以下の判断を行う必要があります。
Javascript コード:

コードをコピー

コードは次のとおりです。

マウスがフラッシュホイールの範囲内にある場合
{
/**a.swf が提供するインターフェイスを呼び出して、a.swf でスクロールをシミュレートします*/
/**「flash」は HTML に埋め込まれた .swf の ID、値は HTML スクロールテーブルのスクロール値です */
document.getElementById("flashID").wheelToFlash(値);
/** HTML ページ上のマウスイベントのバブルを防止します (通常は event.preventDefault())*/
イベントをデフォルトにしない();
}
それ以外
{
/** HTML の通常のスクロール処理を行います。何もする必要はありません*/
}

要約: 方法 1 と比較すると、wmode="window" の制限はありませんが、Alt + Tab の問題は依然として存在します。
注意：JS コードを書くときは、互換性の問題に注意する必要があります。ブラウザによってマウスイベントをリッスンし、スクロール値を取得する方法が異なります。

<<: 素晴らしい CSS ナビゲーションバーの下線効果

>>: Vue を通じて QR コードスキャン機能を実装する