【百分】如何用js去掉网页的滚动条?

发布网友发布时间：2022-05-02 11:25

共6个回答

热心网友时间：2022-04-20 01:31

设置 css overflow:hidden; 就行了。
下面参考代码。测试 ie6 7 Firefox Opera 没用问题
谷歌浏览器只能隐藏显示不行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
try{
var isStyle = document.getElementById("hsScroll").type;
}catch(err){
document.write('<style id="ahsScroll" type="text/css">.hScroll{overflow:hidden;} .sScroll{}</style>');
}

function hideScroll(){
document.documentElement.className = "hScroll";
}
function showScroll(){
document.documentElement.className="sScroll";
}
</script>

<input type="button" value=" 隐藏滚动条 " onclick="hideScroll();" />
<input type="button" value=" 显示滚动条 " onclick="showScroll();" />

<ol>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
</ol>
</body>
</html>

热心网友时间：2022-04-20 02:49

<html>
<head>

<script>
var delscr = function() {
document.body.style.overflow = 'hidden';
}

var resscr = function() {
document.body.style.overflow = 'scroll';
}
</script>

</head>
<body>
<input type = 'button' value = '去掉滚动条' onclick = 'delscr()'>
<input type = 'button' value = '恢复滚动条' onclick = 'resscr()'>
<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</body>
</html>

热心网友时间：2022-04-20 04:24

设置
css
overflow:hidden;
就行了。
下面参考代码。测试
ie6
7
Firefox
Opera
没用问题
谷歌浏览器
只能隐藏
显示不行
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/>
<title>无标题文档</title>
</head>
<body>
<script
type="text/javascript">
try{
var
isStyle
=
document.getElementById("hsScroll").type;
}catch(err){
document.write('<style
id="ahsScroll"
type="text/css">.hScroll{overflow:hidden;}
.sScroll{}</style>');
}
function
hideScroll(){
document.documentElement.className
=
"hScroll";
}
function
showScroll(){
document.documentElement.className="sScroll";
}
</script>
<input
type="button"
value="
隐藏滚动条
"
onclick="hideScroll();"
/>
<input
type="button"
value="
显示滚动条
"
onclick="showScroll();"
/>
<ol>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
<li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li><li>.</li>
</ol>
</body>
</html>

热心网友时间：2022-04-20 06:15

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---去掉窗体滚动条的方法</title>

</head>

<body scroll="no">
</body>

</html>

热心网友时间：2022-04-20 08:23

思路大概是用JS控制CSS，只要body,html中的 overflow:display就可以隐藏滚动条了

热心网友时间：2022-04-20 10:48

楼上正解，但是兼容性不好！
冲着你的分，我还是帮你研究测试了下，不过凡事不可强求，有些代码是目前是兼容不了所有浏览器的，更不要说符合W3C了，也可能我的水平有限，有空我再请教请教高人，另外建议你去蓝色理想，嗯，可以去51JS，那里高人多。
祝好运！

参考资料：http://www.jsweb8.cn/html/js_window/1365.htm