一般的なエフェクトはCSSのみで実行できますが、エフェクトのオン/オフを切り替えるにはjavascriptが必要です。
bodyがoverflow: hiddenであるのに対して、一般的な考え方は、画像を含むレイヤーでposition: fixedとoverflow: scrollを使用することです。このような状況では、オーバーレイのコンテンツはスクロールできますが、本文はスクロールできません。
これはデスクトップ上で動作しますが、bodyのoverflow: hiddenにもかかわらずすべてのコンテンツがレンダリングされるモバイルでは少し異なります。迅速な回避策はbodyにもposition: fixedを適用することです。これが意図された動作かどうかはわかりませんが、SafariとiOSの両方のChromeでうまく動作します。
マークアップのアウトライン：は
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS：あなたはbody上のクラスno-scrollを切り替えるためにはJavaScriptを使用することができます。これにより
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
。そこには、オーバーフローしているコンテンツが隠されており、overlayが表示されます。それがなければ、overlayは隠されています。
ここでは、効果の例を示します無スクロールクラスやJavaScript、しかし、ちょうどそれが動作することを示すために）：
- Full screen
- がWith markup/CSS visible
編集：上記の例で
、私が与えましたoverlayは半透明の背景であり、その内部の画像はmax-widthが100％であった。画面全体にイメージを塗りつぶしたい場合は、max-widthを通常のwidthに変更します。
編集2：
要求されたとして、ここでは効果を切り替えるjQueryの機能があります。
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
ちょうど
<button>または任意のクラス名
closeを与え、それがオンとオフ効果を切り替えます。
+1の手描きの例 –
jQueryはJavaScriptです。あなたはいつでもjQueryの代わりに純粋なJavaScriptを使うことができます。 – ComFreek