您的位置：首页 > Web前端 > JavaScript

W3C标准下js动态隐藏滚动条(document.body兼容处理)

2011-06-10 10:09 537 查看

关于在css中控制滚动条是否隐藏，想必对大家说都小意思了，可是用js动态控制是否显示呢？
估计还没有思路，去百度一下，方法了了无几，没有可以真正实现的～
这两天也正在考虑这个问题，居然就被我想通了，一个js控制overflow:hidden;不就搞定了嘛～
结果发现在op ff等下却无效，查了下资料，现将动态隐藏滚动条的js贴出来，以方便有此需要的朋友。
至于用处就不说啦，点击一下本博客文章页面中的“我要引用此文章”就知道啦，呵呵！

关于这个功能的兼容，最主要的就是将document.body兼容了
看看这段代码：

var temp_h1 = document.body.clientHeight;
var temp_h2 = document.documentElement.clientHeight;
var isXhtml = (temp_h2<=temp_h1&&temp_h2!=0)?true:false;
var htmlbody = isXhtml?document.documentElement:document.body;

ff好像不支持document.body，需要用document.documentElement.clientHeight来兼容ff
其实也不用这么麻烦的判断，完全可以用浏览器判断的js来确定是否用document.documentElement.clientHeight，呵呵～
先就这样啦，明白就好！

HTML代码

<!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> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="www.mysuc.com" />
<meta name="Designer" content="hayden" />
<meta name="Designer mail" content="QQ:3996992" />
<meta name="robots" content="hayden" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
</head>
<body style="margin:0;padding:0;" mce_style="margin:0;padding:0;">
<div id="wawa" style="background:#ff0000;width:1800px;height:1800px;color:#fff;"  ><A HREF="#" mce_HREF="#" onclick="setwindow();">点击这里测试</A>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>

<SCRIPT LANGUAGE="JavaScript">
<!--
var temp_h1 = document.body.clientHeight;
var temp_h2 = document.documentElement.clientHeight;
var isXhtml = (temp_h2<=temp_h1&&temp_h2!=0)?true:false;
var htmlbody = isXhtml?document.documentElement:document.body;var newdivs = false;
function setwindow(){
if (newdivs){
newdivs = false;
htmlbody.style.overflow = "auto";
}else{
newdivs = true;
htmlbody.style.overflow = "hidden";
}
}
//-->
</SCRIPT>
</body>
</html>

转载请注明：

引用内容
作者：静￠脉(hayden)
来源：www.mysuc.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航