ユーザーがスクロールするとアイテムが垂直に流れる、Pinterest に似たページを作成しています。ユーザーがこれらの項目のいずれかをクリックすると、関連するコンテンツを含むモーダルが開きます。現在、モーダルは絶対位置の div です。
モーダルと背景 (項目リスト) の両方が、ユーザーのブラウザーの高さよりも長くなっています。ブラウザのスクロール バーが背景の高さではなくモーダル div の高さを表すようにし、モーダルが閉じられたときに元に戻すにはどうすればよいですか?
背景を非表示にしてモーダルを表示しようとしましたが、モーダルを非表示にして背景を表示すると、ページが再び上にスクロールします。Pinterest のメイン ページのように、背景が少し見えるようにしたいと思います。
モーダル div に対して次のようにします。
<div style="background-color: rgba(255,255,255, 0.93);position:fixed;
overflow-x:auto;overflow-y:scroll;bottom:0;left:0;right:0;top:0;
z-index:9999;"></div>
ドキュメント全体を埋める div を作成し、中央のコンテンツにスクロールバーを追加します。モーダルを表示したらすぐに、ページの本体 (背景) を次のように設定する必要があります。
style="overflow:hidden"
次のような jquery を使用できます。
$("body").css("overflow", "hidden");
他のスクロール バーを削除するには、本体でオーバーフローを非表示に設定することが重要です。これを Firefox でテストしたところ、うまくいきました。説明どおりにdivを作成し、ボディスタイルを設定すると機能しました。テストしたときも、ドキュメントの途中でした。バックグラウンド ドキュメントは元の場所にとどまり、移動しませんでした。