如何让IE下的滚动条在内容少的时候隐藏得更彻底呢？
滚动条的出现使固定的有限空间能够展示更多的内容。但是当展示内容很少的时候，滚动条还需要吗？这个情况下,Firefox会将滚动条隐藏得很彻底，但是，IE做不到这样，还留有滚动条的灰色痕迹。对比图如下：
Firefox 3.0.1:
IE7为例，IE6是同样的状况：
解决这个问题，采用<body scroll="no">的方法不妥，将使这个窗口始终没有滚动条，多出的内容会被隐藏，看不到。
我们需要这样的一种解决方案：当展示内容没有超出当前窗口范围时，将滚动条隐藏得无影无踪（就像FF做得到的那样）；当内容超出当前窗口范围时，滚动条要出来发挥作用（scroll="no"）没做到。
采用JS实现的完整代码如下：
<!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>
<title>解决IE下的滚动条显示与隐藏的自适应</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" media="screen" href="" mce_href="" />
<style>
body{margin:0;padding:0;}
</style>
</head>
<body>
<div>
<p>testtesttesttesttesttesttesttesttestte ssttesttesttesttes testtesttestte sttestte sttesttestt esttest</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function autoScrollResize() {
var content_h = document.body.clientHeight; // 内容高度
var content_w = document.body.clientWidth;
var broswer_h = document.documentElement.clientHeight; // 浏览器窗口的可视高度
var broswer_w = document.documentElement.clientWidth;
if(content_h < broswer_h && content_w < broswer_w) {
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
document.getElementsByTagName('html')[0].style.overflow = 'hidden'; // 在DTD标准下，为html元素设置overflow:hidden才能去掉滚动条
} else{
document.getElementsByTagName('html')[0].style.overflow = 'auto';
}
}
window.onload = function() {
if(window.ActiveXObject) { // 针对IE
autoScrollResize();
window.attachEvent("onresize", autoScrollResize); // 使用ie的resize时事件监听
}
}
//-->
</SCRIPT>
对代码进行的简要分析如下：
- 只是需要对IE做这个调整，if(window.ActiveXObject)只对IE起作用。
- onresize事件保证了在窗口缩放的时候，能够对内容是否超出窗口范围进行判断。这个事件的监听需要使用到window.attachEvent()方式才对IE起作用。
- document.body.clientHeight获得展示内容的高度，document.documentElement.clientHeight获得浏览器窗口的高度。
- 一般情况下，给body标签加上“overflow:hidden”属性即可，但好像不起作用，原因在于文档头引入了DTD标准，这个时候需要给html标签设置“overflow:hidden”属性，这样就可以完全隐藏滚动条了。
至此，解决，附图一张：
转载请注明来自咿呀咿呀哟iaiau
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape('彻底隐藏滚动条：解决IE下滚动条的自适应隐藏')+'&u='+escape('http://spring.blog.35.cn/2008/08-08/ie-yincang-gundongtiao/')+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus(); "添加到POCO网摘"){kind=logo}
