QQ 中的一些网站,比如:http://show.qq.com/community/flower/,在操作时,可能会弹出一个登录框,而此时整个网页覆盖一个浅蓝色的背景,包括“浏览器滚动条”也被覆盖了,此时我们无法拖动滚动条。
它是怎么做的呢?实际上我们看到的“浏览器滚动条”并不是真正的浏览器的滚动条。
<body scroll="no">
或
overflow:hidden;
overflow-y:hidden;
overflow-x:hidden;
然后设置网页最外层元素(比如是一个 div)的宽度都是 100%,再设置样式表 overflow:auto;,如果网页高度超过浏览器 clientWidth、clientHeight,就会自动显示滚动条,由于宽度是 100%,所以这个滚动条就位于浏览器的边缘,看起来就像是浏览器的滚动条一样。
而在这个网页元素上层覆盖一个层是可以将其滚动条也覆盖起来的。 (不能覆盖<select>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.x{Scrollbar-Face-color:#FFCC00;
Scrollbar-Highlight-Color:#FF0000;
Scrollbar-Shadow-Color:#FFFFFF;
Scrollbar-3Dlight-Color:#000000;
Scrollbar-Arrow-Color:#000000;
Scrollbar-Track-Color:#FDEAC4;
Scrollbar-Darkshadow-Color:#FFFF00;
/*height:590px;*/
height:590px;
width:100%;
background-color:#CCCCCC;
overflow: scroll;
}
.hi{
display:none;
position:absolute;
height:650px;
width:100%;
background-color:#FF9933;
}
</style>
</head>
<body style="margin:0px" scroll="no">
<div class="hi" id="hi">
<span onclick="javascript:document.getElementById('hi').style.display='none';">关闭</span>
</div>
<div class="x">
<span onclick="javascript:document.getElementById('hi').style.display='block';">显示</span>
<p>a</p> <p>a</p>
<p>a</p> <p>a</p>
<p>a</p> <p>a</p>
<p>a</p> <p>a</p><select name="">
<option >asdsad</option>
<option >asdsad</option>
<option >asdsad</option>
</select>
<p>a</p> <p>a</p>
<p>a</p> <p>a</p>
<p>a</p> <p>a</p><p>a</p>
<p>a</p>
<p>a</p>
</div>
</body>
</html>