我有一个可滚动的小内容框，侧滚动条是通过iframes的java脚本自定义的，我可以使用以下方法摆脱它：
溢出-y：滚动; overflow-x：hidden;
但它阻止我的java代码工作....
body{
background-color: #372d24;
width: 100%;
height: 1000px;
}
#header{
width: 100%;
height:24px;
position: absolute;
left: 0px;
top: 0px;
background-image: url(http://i65.tinypic.com/29lxow1.jpg);
background-repeat: repeat-x;
}
#header2{
width: 100%;
height: 205px;
position: absolute;
left: 0px;
top: 24px;
background-color: #d7d1cb;
}
#logo{
width: 500px;
height: 205px;
background-image: url(http://i65.tinypic.com/nbt3y9.png);
position: absolute;
left: 500px;
top: 20px;
}
#navione{
position: absolute;
left: 75px;
top: 45px;
}
#navitwo{
position: absolute;
left: 280px;
top: 45px;
}
#navigation {
width: 200px;
line-height: 7px;
}
#navigation a:link, #navigation a:visited, #navigation a:active {
display: block;
font: 8px "small fonts", "century gothic";
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
background-color: #d7d1cb;
border-color: #392f3f;
border-style: solid;
border-width: 1px;
color: #392f3f;
padding: 7px 3px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#navigation a:hover {
background-color: #392f3f;
color: #ffd6d0;
padding: 7px 9px;
}
#updates{
width: 560px;
height: 196px;
position: absolute;
left: 1006px;
top: 26px;
}
iframe {
width: 560px;
height: 196px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://babywitch.altervista.org/Characters/stylesheet.css">
<title></title>
</head>
<body>
<div id="header"> </div>
<p> </p>
<div id="header2"></div>
<div id="logo"></div>
<div id="navione">
<div id="navigation">
<a href="http://google.com">H o m e</a><br>
<a href="http://yahoo.com">A b o u t</a><br>
<a href="http://yahoo.com">N A V I</a><br>
<a href="http://bing.com">F A Q</a><br>
<a href="http://bing.com">M E D I A</a><br>
</div></div>
<div id="navitwo">
<div id="navigation">
<a href="http://google.com">link 5</a><br>
<a href="http://yahoo.com">link 2</a><br>
<a href="http://yahoo.com">link 3</a><br>
<a href="http://bing.com">link 4</a><br>
<a href="http://bing.com">link 5</a><br>
</div></div>
<div id="updates">
<div style="background:#fff;">
<iframe name="updates" src="http://babywitch.altervista.org/Characters/updates.html" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:0px; border-color:#; background:#d7d1cb; border-style:solid; height: 200px;">
</iframe>
</div>
</div>
</body>
</html>
这里有三个java脚本代码：
答案 0 :(得分：0)
如果你想隐藏浏览器的x滚动条，只需简单一点。只改变身体css ..
body{
background: #372d24;
width: 100%;
height: auto;
background-repeat:no-repeat;
}
但是如果要清除滚动条x和y，则需要更改大量的CSS。在你的CSS中你设置了一些背景图像，背景颜色。我只将它们改为背景并设置background-repeat：no-repeat;但我不会改变css标题repeat-x。如果您对此有任何疑问，请在评论中提出。但是你可以使用bootstrap简单地创建这个页面。无论如何这里是答案 如果可能的话，更改id的宽度：100％到min-width：95％并忽略代码段中的控制台日志错误
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js">
</script>
$(function(){
$('#content').slimScroll({
width: '100%',
height: '100%',
color: '#FF0000',
allowPageScroll: false,
});
});
body
{
background: #372d24;
min-width: 100%;
background-repeat:no-repeat !important;
}
#header{
min-width: 100vw;
height:24px;
position: absolute;
left: 0px;
top: 0px;
background: url(http://i65.tinypic.com/29lxow1.jpg);
background-repeat:repeat-x;
}
#header2{
width: 100%;
height: 205px;
position: absolute;
left: 0px;
top: 24px;
background: #d7d1cb;
background-repeat:no-repeat;
}
#logo{
width: 500px;
height: 205px;
background: url(http://i65.tinypic.com/nbt3y9.png);
position: absolute;
left: 500px;
top: 20px;
background-repeat:no-repeat;
}
#navione{
position: absolute;
left: 75px;
top: 45px;
}
#navitwo{
position: absolute;
left: 280px;
top: 45px;
}
#navigation {
width: 200px;
line-height: 7px;
}
#navigation a:link, #navigation a:visited, #navigation a:active {
display: block;
font: 8px "small fonts", "century gothic";
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
background: #d7d1cb;
background-repeat:no-repeat;
border-color: #392f3f;
border-style: solid;
border-width: 1px;
color: #392f3f;
padding: 7px 3px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#navigation a:hover {
background: #392f3f;
background-repeat:no-repeat;
color: #ffd6d0;
padding: 7px 9px;
}
#updates{
position: absolute;
left: 1006px;
top: 26px;
right: 0;
}
iframe {
min-width: 100%;
height: 196px;
}
#contant{
width:95% !important;
}
<body>
<div id="header">
</div>
<div id="header2">
</div>
<div id="logo">
</div>
<div id="navione">
<div id="navigation">
<a href="http://google.com">H o m e</a><br>
<a href="http://yahoo.com">A b o u t</a><br>
<a href="http://yahoo.com">N A V I</a><br>
<a href="http://bing.com">F A Q</a><br>
<a href="http://bing.com">M E D I A</a><br>
</div>
</div>
<div id="navitwo">
<div id="navigation">
<a href="http://google.com">link 5</a><br>
<a href="http://yahoo.com">link 2</a><br>
<a href="http://yahoo.com">link 3</a><br>
<a href="http://bing.com">link 4</a><br>
<a href="http://bing.com">link 5</a><br>
</div>
</div>
<div id="updates">
<iframe name="updates"
src="http://babywitch.altervista.org/Characters/updates.html"
marginwidth="0" marginheight="0" frameborder="no">
</iframe>
</div>
</body>
</html>