JS ポップアップ レイヤー マスク、背景ページのスクロール バーの詳細を非表示にする最適化分析_JavaScript スキル

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 ポップアップ レイヤー マスク、非表示の背景ページ スクロール バーの詳細最適化分析は、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、スクリプト ホームをサポートしていただければ幸いです。