javascript滚动条问题

2 日，22 小时 Questions & Answers 42

我有一个可滚动的小内容框，侧滚动条是通过iframes的java脚本定制的，我可以使用以下方法摆脱它：

溢出y：滚动；溢出-x：隐藏

但它阻止了我的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>&nbsp;</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>

# 1 楼答案

如果你想隐藏浏览器的x-滚动条，只需简单一点。仅更改主体css

body{ 
background: #372d24;
width: 100%;
height: auto;
background-repeat:no-repeat;
}

但是如果你想同时清除滚动条x和y，你需要改变很多css。在css中设置一些背景图像，背景颜色。我将它们更改为仅背景，并设置背景重复：无重复；但我不会更改css标题repeat-x。如果你对此有任何疑问，请在评论中询问我。但是你可以简单地用引导程序创建这个页面。不管怎样，答案就在这里如果可能的话，将id contant width: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>

；

Python中文网

有 Java 编程相关的问题?

javascript滚动条问题

共 (1) 个答案

# 1 楼答案