1. スクロールバーを削除する方法
本文に overflow:hidden 属性を追加するだけでは、IE6 および 7 では有効になりません。html
に overflow:hidden 属性を追加する必要があります。
IE6、7 およびその他のブラウザーのハックを使用してスタイルを識別する必要があります。これは、ページをプルダウンしたときに html または本文が overflow:hidden の場合、透明なポップアップ レイヤーの下のページが部分的に表示されるためです。通常は非表示になります。透明度を使用して表示されるグレー スケールは、プラットフォームとユーザーによって設定された背景色に関連しています。
本文または HTML からスクロール バーを削除すると、ページのスクロール バーの幅が 2 分の 1 にジャンプします。このジャンプはユーザー エクスペリエンスにとって非常に悪いので、本文に右パディングを追加します。そのサイズはスクロール バーの幅です。 Windows プラットフォームのスクロール バーの幅は 17 ピクセルです。Linux プラットフォームのスクロール バーの幅は、次のコードで Windows プラットフォームで計算できます。例として。
関連コード:
document.documentElement.style.cssText = ‘overflow:none;+overflow:hidden;_overflow:hidden;'; document.body.style.cssText = ‘overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;';
上記のコードは、html または本文にインライン スタイルがあるかどうかを考慮しません。HTML または本文にインライン スタイルがある場合は、それらを蓄積する必要があります。そうでない場合、元のスタイルはクリアされます。
2. ページをスクロールして隠れた危険を取り除くその他の方法 (悪用を防ぐため)
スクロール バーを非表示にすると、マウス ホイールでスクロールしてもページが動かなくなります。これで大丈夫かと思いましたが、違いました...
キーボード ショートカットは、上下キーやページめくりキーなど、ページのスクロールに関連する一部のブラウザ操作も操作できます。キーボード ショートカットの場合は、デフォルトのアクションをキャンセルする必要があります。
3. ポップアップレイヤースタイルを追加します
本文にグローバル スタイルを追加 (IE6 と互換性あり)
高さ:100%;
伸縮性レイヤーにスクロール スタイルを追加します
overflow-y: auto; width: 100%; height: 100%; left:0; _padding:0 17px 0 0; //IE6bug,子元素绝对定位后对于父元素的padding依然有效
上記の JS ポップアップ レイヤー マスク、非表示の背景ページ スクロール バーの詳細最適化分析は、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、スクリプト ホームをサポートしていただければ幸いです。