これが私がアプリケーションで使用した私のソリューションです。
本文のオーバーフローを無効にし、Webサイト全体のHTMLをコンテナーdiv内に配置しました。Webサイトのコンテナーがオーバーフローしているため、ユーザーは期待どおりにページをスクロールできます。
次に、Webサイト全体をカバーする、より高いZインデックスを持つ兄弟div(#Prevent)を作成しました。#Preventの方がZインデックスが高いため、Webサイトコンテナーと重複しています。#Preventが表示されているときは、マウスがWebサイトコンテナーの上に移動していないため、スクロールできません。
もちろん、モーダルなど、#PreventよりもZインデックスが高い別のdivをマークアップに配置することもできます。これにより、スクロールの問題のないポップアップウィンドウを作成できます。
このソリューションは、スクロールバーを非表示にしないため、より効果的です(ジャンプ効果)。イベントリスナーを必要とせず、実装も簡単です。IE7と8では(特定のコードによって異なりますが)プレイバックする必要がありますが、すべてのブラウザーで機能します。
html
<body>
<div id="YourModal" style="display:none;"></div>
<div id="Prevent" style="display:none;"></div>
<div id="WebsiteContainer">
<div id="Website">
website goes here...
</div>
</div>
</body>
CSS
body { overflow: hidden; }
#YourModal {
z-index:200;
/* modal styles here */
}
#Prevent {
z-index:100;
position:absolute;
left:0px;
height:100%;
width:100%;
background:transparent;
}
#WebsiteContainer {
z-index:50;
overflow:auto;
position: absolute;
height:100%;
width:100%;
}
#Website {
position:relative;
}
jquery / js
function PreventScroll(A) {
switch (A) {
case 'on': $('#Prevent').show(); break;
case 'off': $('#Prevent').hide(); break;
}
}
スクロールを無効/有効にします
PreventScroll('on'); // prevent scrolling
PreventScroll('off'); // allow scrolling