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

最新推荐文章于 2022-02-23 15:02:25 发布

paypal1987

最新推荐文章于 2022-02-23 15:02:25 发布

阅读量2.9k

点赞数

文章标签： c xhtml html javascript 浏览器百度

关于在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="#" οnclick="setwindow();">点击这里测试</A>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>

转载请注明：

引用内容

作者：静￠脉(hayden)
来源：www.mysuc.com

paypal1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3C标准下js动态隐藏滚动条(document.body兼容处理)

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

扫一扫