ホームページ > 記事 > ウェブフロントエンド > スクロール バーへの影響を防ぐことができる全画面マスク効果_html/css_WEB-ITnose
スクロール バーへの影響を防ぐことができる全画面マスク効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:211763ブラウズ
スクロール バーの影響を防ぐことができるフルスクリーン マスク効果:
マスク効果は現在多くのアプリケーションで使用されています。もちろん、それは透明なフルスクリーン要素にすぎません。特別な注意が必要な状況の 1 つは、ページにスクロール バーが表示されるときです。この時点で処理が実行されないと、マスク レイヤー効果が平凡な動作をする可能性があります。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> *{ margin:0px; padding:0px; } .zhezhao{ width:100%; height:100%; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .login{ width:280px; height:180px; position:absolute; top:200px; left:50%; background-color:#000; margin-left:-140px; display:none; z-index:1500; text-align:right; } .content{ margin-top:50px; color:red; line-height:200px; height:200px; text-align:center; } </style> <script type="text/javascript"> window.onload=function(){ var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("login"); var bt=document.getElementById("bt"); var btclose=document.getElementById("btclose"); bt.onclick=function(){ zhezhao.style.display="block"; login.style.display="block"; } btclose.onclick=function(){ zhezhao.style.display="none"; login.style.display="none"; } } </script> </head> <body style="height:1000px;"> <div class="zhezhao" id="zhezhao"></div> <div class="login" id="login"><input type="button" id="btclose" value="点击关闭"/></div> <div class="content">蚂蚁部落欢迎您，<input type="button" value="查看效果" id="bt"/></div> </body> </html> 上記のコードでは、ボタンをクリックしてマスクレイヤーエフェクトをポップアップ表示しますが、スクロールバーを下にドラッグすると、下部にマスクがないことがわかります。コードは次のように変更されます:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> *{ margin:0px; padding:0px; }html{height:100%}.zhezhao{ width:100%; height:100%; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .login{ width:280px; height:180px; position:absolute; top:200px; left:50%; background-color:#000; margin-left:-140px; display:none; z-index:1500; text-align:right; } .content{ margin-top:50px; color:red; line-height:200px; height:200px; text-align:center; } #middle{ width:30px; height:1000px; margin:0px auto; background:red;}</style> <script type="text/javascript"> window.onload=function(){ var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("login"); var bt=document.getElementById("bt"); var btclose=document.getElementById("btclose"); bt.onclick=function(){ zhezhao.style.display="block"; login.style.display="block"; document.body.style.height="100%"; document.body.style.overflow="hidden"; } btclose.onclick=function(){ zhezhao.style.display="none"; login.style.display="none"; document.body.style.height=""; document.body.style.overflow=""; } } </script> </head> <body> <div class="zhezhao" id="zhezhao"></div> <div class="login" id="login"><input type="button" id="btclose" value="点击关闭"/></div> <div class="content">蚂蚁部落欢迎您，<input type="button" value="查看效果" id="bt"/></div> <div id="middle"></div></body> </html> 上記のコードでは、ボタンをクリックしてマスク レイヤーをポップアップすると、ボディの高さが 100% に設定され、値が 100% に設定されます。ボディの高さをブラウザのクライアント領域の高さと同じにし、オーバーフロー属性値を非表示に設定すると、余分な部分が非表示になり、マスクレイヤーがポップアップするとスクロールバーが表示されます。クリックしてマスクレイヤーを閉じると、すべてが元の状態に戻ります。特に注意が必要なのは、次のコードが CSS に追加されていることです:
html{height:100%} 具体的な情報については、HTML と本文の 100% 高さの役割の設定に関する章を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=14507
詳細については、以下を参照してください: http://www.softwhy.com/divcss/