js动态隐藏滚动条(兼容多浏览器 IE FF等)

发布时间:2020-07-01编辑:脚本学堂
为大家介绍一个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;

完整代码如下:
 

复制代码 代码示例:
<!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>js动态隐藏滚动条_www.jb200.com</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="myhhe.cn" />
    <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="" />
    <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>
</head>
<body style="margin:0;padding:0;">
<div id="wawa" style="background:#ff0000;width:1800px;height:1800px;color:#fff;"  ><A HREF="#" onclick="setwindow();">点击这里测试</A>脚本学堂_www.jb200.com 欢迎大家的光临。脚本学堂_www.jb200.com 欢迎大家的光临。脚本学堂_www.jb200.com 欢迎大家的光临。脚本学堂_www.jb200.com 欢迎大家的光临。脚本学堂_www.jb200.com 欢迎大家的光临。</div>
</body>
</html>