IE6 の固定位置付けについてもう一度話しましょう

著者：Eve Cole 更新時間：2010-11-12 15:43:53

2002 年に開発され、現在我が国で主流となっている IE6 ブラウザが CSS2 の固定位置属性をサポートしていないことはよく知られています。このため、問題を抱えたフロントエンドエンジニアはさまざまな解決策を考案しました。

1. 従来のjsソリューション

これは最も古く、広く使用されています。たとえば、スクロールバーに続く多くの対句広告ではこのソリューションが使用されています。欠点は、スクロールバー要素のドラッグが非常にひどく揺れることです。これはスムージングによって改善できますが、その効果はまだ理想的ではありません。しかし、私が言いたいのは、このソリューションの視覚効果は少し劣るものの、安定性は言うことないということです。

2. HTML構造とレイアウトのシミュレーション方法を使用する

このソリューションは、かつて 163 Blog で使用されていました。163 は、高さが 100% でスクロールバーが自動に設定されたコンテナにすべてのコンテンツを配置し、その下に絶対位置のレイヤーを設定して、絶対位置のレイヤーが到達できるようにします。静的な状態。原則: ドラッグするスクロールバーは、ドラッグするページ全体ではなく、ページ全体をシミュレートするコンテナであるため、コンテナの外側の領域は「静止」しています。詳細:

引用した内容は以下の通りです。

「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
http://www.w3.org/1999/xhtml ">
<頭>
<スタイル>
*{マージン:0}
体{
高さ:1000ピクセル;
幅:1000ピクセル;
}
#a{
幅:300ピクセル;
高さ:100ピクセル;
背景:赤;
}

<スクリプト>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = '絶対';

window.onscroll = function(){
d.innerHTML = '';
}
}それ以外{
a.style.position = '固定';
}
a.style.right = '0';
a.style.bottom = '0';
}

<本文>

テスト

この視覚効果は完璧ですが、3 つの問題があります。

1. HTML構造を変更する必要がある（この項目については説明しません）

2. ユーザーエクスペリエンスを破壊します。以前にこの方法を試したことがありますが、ページを更新するとスクロールバーが所定の位置に留まらず、これは許容できません。

3. いくつかの js イベントを破棄します。cloudgamer は、ウィンドウのスクロールイベントを破棄すると述べています。ここでは、少なくとも N 個のカプセル化された js コンポーネントを無効にすることができます。

3. マースメソッドを活用した前例のない「クリアリング方式」ソリューション

原理が奇妙すぎて説明できないし、応用範囲が狭すぎる。例については、以下を参照してください。

引用した内容は以下の通りです。

テスト

4. 古いテクノロジーを新たに使用するための式と固定背景ソリューション

このソリューションは、視覚的に完全な静的位置決めを実現できます。例：

Cloudgamer: AlertBox ポップアップレイヤー (情報プロンプトボックス) エフェクト

前回：「シンプルな全画面透明マスク（ライトボックス）ソリューション」