htmlと埋め込みFlashの両方にスクロールバーがある場合の解析と対処法
2022-01-16 19:44:24
開発業務では、このような状況によく遭遇します。
A.swfがウェブページに追加され、a.swfとhtmlページの両方にスクロールバーがある。プロジェクトマネージャーはBTから、a.swfのマウスがスクロールしたときにhtmlページがスクロールしないように処理すること、またはその逆を行うことを要求されています!
どうすればいいのでしょうか?
方法1 :
1. a.swfのスクロールエリアにマウスを移動させたとき。ブラウザのマウススクロールリスナーを削除するようにJSに伝える。
2. a.swfのスクロールエリアにマウスを乗せる。ブラウザのマウススクロールリスナーを追加するようにJSに伝える。
3.a.swfのwmodeを"window"に設定します。
要約すると:wmodeは&quotに設定;ウィンドウ"は、その下に任意のhtmlページをブロックするa.swfになり、プロジェクトの要件を満たしていない可能性があります。さらに、マウスはブラウザマスクリスナーを追加するJSに言わずにページを切り替えるにはAltキーを押した後にa.swfスクロールエリアに移動し、操作はhtmlページに切り戻した後にスクロールが扱われないようになります
方法2 :
1.a.swfは、独自のマウススクロールリスナーを削除し、wheelToFlash(value)などのJSが呼び出すスクロール処理のインターフェースを追加しました。
2. 2. マウスがa.swfのスクロール領域に移動したとき:JSに伝える(例:mouseIsInFlashWheelRange=true)。
3. マウスがa.swfのスクロールエリアから外れたとき。mouseIsInFlashWheelRange=falseなど、JSに伝える。
4. JSはマウスのスクロールイベントをリッスンしますが、イベントリスナーハンドラの中で、以下の判定を行う必要があります。
Javascriptのコードです。
if(mouseIsInFlashWheelRange==true)
{
/* Call the interface provided by a.swf to make a.swf simulate scrolling */
/*"flash" is the ID of the html embedded a.swf, value is the value of the html scrolling table scroll*/
document.getElementById("flashID").wheelToFlash(value);
/* Prevent bubbling of mouse events on html pages, usually event.preventDefault()*/
event.preventDefault();
}
else
{
/* Handle the normal scrolling of the html, we can do nothing */
}
概要 : 方法1と比較して、wmode="window"の制限はありませんが、Alt+Tabの問題は依然として存在します。
備考 : ブラウザによってマウスイベントを聞き、スクロールの値を取得する方法が異なるため、JSコードを書く際には互換性の問題に注意する必要があります
A.swfがウェブページに追加され、a.swfとhtmlページの両方にスクロールバーがある。プロジェクトマネージャーはBTから、a.swfのマウスがスクロールしたときにhtmlページがスクロールしないように処理すること、またはその逆を行うことを要求されています!
どうすればいいのでしょうか?
方法1 :
1. a.swfのスクロールエリアにマウスを移動させたとき。ブラウザのマウススクロールリスナーを削除するようにJSに伝える。
2. a.swfのスクロールエリアにマウスを乗せる。ブラウザのマウススクロールリスナーを追加するようにJSに伝える。
3.a.swfのwmodeを"window"に設定します。
要約すると:wmodeは&quotに設定;ウィンドウ"は、その下に任意のhtmlページをブロックするa.swfになり、プロジェクトの要件を満たしていない可能性があります。さらに、マウスはブラウザマスクリスナーを追加するJSに言わずにページを切り替えるにはAltキーを押した後にa.swfスクロールエリアに移動し、操作はhtmlページに切り戻した後にスクロールが扱われないようになります
方法2 :
1.a.swfは、独自のマウススクロールリスナーを削除し、wheelToFlash(value)などのJSが呼び出すスクロール処理のインターフェースを追加しました。
2. 2. マウスがa.swfのスクロール領域に移動したとき:JSに伝える(例:mouseIsInFlashWheelRange=true)。
3. マウスがa.swfのスクロールエリアから外れたとき。mouseIsInFlashWheelRange=falseなど、JSに伝える。
4. JSはマウスのスクロールイベントをリッスンしますが、イベントリスナーハンドラの中で、以下の判定を行う必要があります。
Javascriptのコードです。
コピーコード
コードは以下の通りです。
if(mouseIsInFlashWheelRange==true)
{
/* Call the interface provided by a.swf to make a.swf simulate scrolling */
/*"flash" is the ID of the html embedded a.swf, value is the value of the html scrolling table scroll*/
document.getElementById("flashID").wheelToFlash(value);
/* Prevent bubbling of mouse events on html pages, usually event.preventDefault()*/
event.preventDefault();
}
else
{
/* Handle the normal scrolling of the html, we can do nothing */
}
概要 : 方法1と比較して、wmode="window"の制限はありませんが、Alt+Tabの問題は依然として存在します。
備考 : ブラウザによってマウスイベントを聞き、スクロールの値を取得する方法が異なるため、JSコードを書く際には互換性の問題に注意する必要があります
関連
-
HTML ホテル フォームによるフィルタリング
-
Html階層型ボックスシャドウ効果サンプルコード
-
HambergurMenu (ハンバーガースタイルのメニュー)のHTML+Sass実装
-
htmlのheaderタグの使い方を説明する
-
divの幅をwidth:100に設定し、親要素を超えるpaddingまたはmarginを設定する場合の解決法
-
H5入力ボックスヒント+通常テキストボックスヒント実装方法
-
一般的なHTMLメタタグの属性(ウェブサイトの互換性と最適化のために必要なもの)
-
HTMLのテキスト外表示省略... テキストオーバーフローの実装
-
Web画像フォーマットPNG、JPG、GIFの選び方・使い方
-
Webページでよく使われるコード より基本的なもの
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン