2016-09-19 77 views
0

我有一個小盒子的內容可滾動,邊滾動條定製通過java腳本內部框架,我可以用擺脫它:滾動條問題X2

溢出-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>&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>

三個Java腳本代碼在這裏:

herehere

+0

窗戶? –

+0

我這麼認爲?我想在屏幕截圖中的白色條消失..我只能想到這樣做,這使得它消失,但它阻止了自定義滾動條,我想不再工作.. –

+0

身體的高度1000px是因爲X滾動條.. –

回答

0

如果您想要隱藏瀏覽器的X滾動條只是簡單的。只改變身體css ..

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

但是,如果你想清除這兩個滾動條x和y你需要更改大量的CSS。在你的CSS中,你設置了一些背景圖像,背景顏色。我將它們更改爲僅背景,並設置背景重複:不重複;但我不改變CSS頭重複-x。如果您對此有任何疑問,請發表評論。但是你可以簡單地用bootstrap來製作這個頁面。反正這裏就是答案 如果可能的變化ID含量的不同寬度:100%至最小寬度:95%,而在片段忽略控制檯日誌錯誤要隱藏溢出-X爲

<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>