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

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 コードスキャン機能を実装する

推薦する

nginxフォワードプロキシとリバースプロキシの詳細な説明

目次フォワードプロキシnginx リバースプロキシnginx リバースプロキシ 02リバースプロキシ...

Angularコンポーネントライフサイクルの詳細説明(I)

目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...

Vue diffアルゴリズムの完全な分析

目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...

nginx で正規表現を使用してワイルドカードドメイン名を自動的に一致させる方法

Nginxは正規表現を使用して、ワイルドカードドメイン名をディレクトリに自動的に一致させます。 Ng...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...

...

Zabbix の psk 暗号化と zabbix_get 値の組み合わせ

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...

Linuxシステムのログの詳細な紹介

目次1. ログ関連サービス2. システム内の共通ログファイル1. ログ関連サービスCentOS 6....

ウェブページが自動的にデュアルコアブラウザの高速モードを呼び出すようにします(Webkit)

コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...

DockerでLNMPアーキテクチャを展開する方法

環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

jQuery エディタ プラグイン tinyMCE の使い方

簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...

HTML ページをズームアウトした後にスクロール バーを表示するためのサンプル コード

ここでは、HTML ページのサイズを縮小した後に下部にスクロール バーを表示し、スクロール バーをス...

Vueアイコンセレクターのサンプルコード

出典: http://www.ruoyi.vip/ 'vue' から Vue をイン...