2002年に広く生産され、現在私の国の主流であるIE6ブラウザは、CSS2の固定されたポジショニング属性をサポートしていません。
1。通常のJSのソリューション
これは、最も古く、広く使用されています。不利な点は、ドラッグスクロールバーの要素が非常に激しく不安になることですが、効果はまだ理想的ではありません。ただし、このソリューションの視覚効果は少し低いものの、安定性は言及されていないと言うことが重要です。
2。HTML構造とレイアウトシミュレーション方法を使用します
このソリューションは、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">
<head>
<style>
*{マージン：0}
体{
高さ：1000px;
幅：1000px;
}
＃a {
幅：300px;
高さ：100px;
背景：赤;
}
</style>
<スクリプト>
var isie6 = window.xmlhttprequest？false：true;
window.onload = function（）{
var a = document.getElementById（ 'a'）;
var d = document.getElementById（ 'd'）;
if（isie6）{
A.Style.Position = 'Absolute';
window.onscroll = function（）{
d.innerhtml = '';
}
}それ以外{
A.Style.Position = '固定';
}
A.Style.Right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id = "d" style = "display：none;"> </div>
<div id = 'a'>テスト</div>
</body>
</html> |
ここでは、視覚効果は完璧です。3つの問題があります。
1。HTML構造を変更する必要があります（このアイテムは説明されていません）
2。ユーザーエクスペリエンスを破壊する：この方法を前に試したことがありますが、ページを更新すると、スクロールバーが存在することはありませんが、容認できません。
3。たとえば、JSのいくつかのイベントを破壊します。
3. MARS法に対する前例のない「クリアリング方法」ソリューション
原則は本当に奇妙で、説明することはできません。アプリケーションの制限は大きすぎます。例を参照してください：
以下は引用されたコンテンツです。 <！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">
<head>
<style>
*{マージン：0}
体{
高さ：1000px;
幅：1000px;
}
＃a {
幅：300px;
高さ：100px;
背景：赤;
}
</style>
<スクリプト>
var isie6 = window.xmlhttprequest？false：true;
window.onload = function（）{
var a = document.getElementById（ 'a'）;
var d = document.getElementById（ 'd'）;
if（isie6）{
A.Style.Position = 'Absolute';
window.onscroll = function（）{
d.innerhtml = '';
}
}それ以外{
A.Style.Position = '固定';
}
A.Style.Right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id = "d" style = "display：none;"> </div>
<div id = 'a'>テスト</div>
</body>
</html> |
4.古いテクノロジー向けに新しく使用された表現と固定された背景ソリューション
このソリューションは、視覚的に静的な位置を完全に実現できます。例：
CloudGamer：アラートボックスポップアップレイヤー（情報プロンプトボックス）効果
私の以前：「シンプルなフルスクリーン透過マスク（ライトボックス）ソリューション」
