2002 年に開発され、現在我が国で主流となっている IE6 ブラウザが CSS2 の固定位置属性をサポートしていないことはよく知られています。このため、問題を抱えたフロントエンド エンジニアはさまざまな解決策を考案しました。
1. 従来のjsソリューション
これは最も古く、広く使用されています。たとえば、スクロール バーに続く多くの対句広告ではこのソリューションが使用されています。欠点は、スクロール バー要素のドラッグが非常にひどく揺れることです。これはスムージングによって改善できますが、その効果はまだ理想的ではありません。しかし、私が言いたいのは、このソリューションの視覚効果は少し劣るものの、安定性は言うことないということです。
2. HTML構造とレイアウトのシミュレーション方法を使用する
このソリューションは、かつて 163 Blog で使用されていました。163 は、高さが 100% でスクロール バーが自動に設定されたコンテナにすべてのコンテンツを配置し、その下に絶対位置のレイヤーを設定して、絶対位置のレイヤーが到達できるようにします。静的な状態。原則: ドラッグするスクロール バーは、ドラッグするページ全体ではなく、ページ全体をシミュレートするコンテナであるため、コンテナの外側の領域は「静止」しています。詳細:
引用した内容は以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
<html xmlns=" 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';
}
</script>
</head>
<本文>
<div id="d" style="display:none;"></div>
<div id='a'>テスト</div>
</body>
</html> |
この視覚効果は完璧ですが、3 つの問題があります。
1. HTML構造を変更する必要がある（この項目については説明しません）
2. ユーザー エクスペリエンスを破壊します。以前にこの方法を試したことがありますが、ページを更新するとスクロール バーが所定の位置に留まらず、これは許容できません。
3. いくつかの js イベントを破棄します。cloudgamer は、ウィンドウのスクロール イベントを破棄すると述べています。ここでは、少なくとも N 個のカプセル化された js コンポーネントを無効にすることができます。
3. マースメソッドを活用した前例のない「クリアリング方式」ソリューション
原理が奇妙すぎて説明できないし、応用範囲が狭すぎる。例については、以下を参照してください。
引用した内容は以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
<html xmlns=" 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';
}
</script>
</head>
<本文>
<div id="d" style="display:none;"></div>
<div id='a'>テスト</div>
</body>
</html> |
4. 古いテクノロジーを新たに使用するための式と固定背景ソリューション
このソリューションは、視覚的に完全な静的位置決めを実現できます。例：
Cloudgamer: AlertBox ポップアップ レイヤー (情報プロンプト ボックス) エフェクト
前回： 「シンプルな全画面透明マスク（ライトボックス）ソリューション」
