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 を使用して IP アドレスが悪意を持って解決されるのを防ぐ方法

Nginxを使用する目的Alibaba Cloud ECS クラウド サーバーを使用して、まずは著者...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

MySQLパスワードを変更するいくつかの方法

序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...

Nginx のアクセス制御とパラメータ調整方法

Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...

MySQL でデータをクエリし、条件に基づいて別のテーブルに更新する方法の例

この記事では、MySQL が条件に基づいてデータをクエリし、別のテーブルに更新する方法を例を使用して...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

MySQLはイベントを使用してスケジュールされたタスクを完了します

イベントでは、SQL コードを 1 回または一定の間隔で実行することを指定できます。通常、複雑な S...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

Apache での ab パフォーマンス テスト結果を分析する

私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

RabbitMQ の Docker インストールと設定手順

目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...

MySQL移行計画と落とし穴の実践記録

目次背景解決策1: 古いデータをバックアップするオプション2: テーブルを分割する解決策3: tid...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...