如何让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”属性，这样就可以完全隐藏滚动条了。
至此，解决，附图一张：
1、完全隐藏
在<boby>里加入scroll="no"，可隐藏滚动条；
<boby scroll="no">
2、在不需要时隐藏
指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；
<boby scroll="auto">
3、样式表方法
在<boby>里加入style="overflow-x:hidden"，可隐藏水平滚动条；加入style="overflow-y:hidden"，可隐藏垂直滚动条。
这种方法在页面头部为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这种兼容模式下是不行的，其它的没试过，最后终于找到了正确的方法：
被包含页面里加入
<style>
html { overflow-x:hidden; }
</style>
有一段解释是这样说的：body{ overflow-x:hidden; }在标准 DTD 下是不可以的。
4、另一种方法
<style type="text/css">
body {
overflow-x:hidden; /*隐藏水平滚动条*/
overflow-y:hidden; /*隐藏水平滚动条*/
}
</style>
此方法在页面头部为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这种兼容模式下也是不行的。
<style type="text/css">
html {
overflow-x:hidden; /*隐藏水平滚动条*/
overflow-y:hidden; /*隐藏水平滚动条*/
}
</style>
扫一扫
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
