溢出时如何隐藏Firefox滚动条:auto？
:: - webkit-scrollbar {display:none; }
我使用此代码,但这仅适用于Google Chrome.
任何帮助人？谢谢!
更新
我用的时候
溢出:隐藏;
页面无法继续页脚.
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="pageWrapper">
<header></header><!--end of header-->
<nav>
<ul>
<li><a href="#">Home</a></li>|
<li><a href="#">Services</a></li>|
<li><a href="#">Gallery</a></li>|
<li><a href="#">FAQ</a></li>|
<li><a href="#">About Us</a></li>|
</ul>
</nav><!--end of nav-->
<aside>
</aside><!--end of aside-->
<section>
</section><!--end of section-->
<footer>All Right Reserved 2013.</footer><!--end of footer-->
</div><!--end of pageWrapper-->
</body>
</html>
我的css
/*----- Reset ----*/
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, address, code, img, small, strong,
dl, dt, dd, ol, ul, li, fieldset, form, label{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
line-height:1.5;
font-family: helvetica, arial, sans-serif;
}
body,html{
height:100%;
background-color:whitemsoke;
}
ol, ul{
list-style:none;
}
/* ---- END OF RESET --- */
#pageWrapper{
width:965px;
height:100%;
margin:auto;
box-shadow:1px 1px 17px black;
overflow:hidden;
}
::-webkit-scrollbar {
display:none;
}
header{
background-color: #D4E7ED;
height:200px;
}
nav{
text-align:center;
background-color:#003366;
padding:10px;
}
nav ul li{
display:inline;
padding:20px;
}
nav ul li a{
text-decoration:none;
color:whitesmoke;
}
nav ul li a:hover{
text-decoration:underline;
}
aside{
width:200px;
background-color:#666666;
height:100%;
overflow:hidden;
float:left;
margin:0 auto -20px 0;
}
section{
background-color:#CCCCCC;
height:100%;
margin:0 auto -20px 0;
overflow:hidden;
}
footer{
background-color:#003366;
height:20px;
position:relative;
}
cho*_*wey 17
我没有找到任何特定的Firefox.我一直在寻找相当于::-webkit-scrollbar { display:none }.
然而,我所发现的是一种通用的跨浏览器解决方案:
<div class="outer">
<div class="inner">
Some content...
</div>
</div>
<style>
.outer {
overflow: hidden;
}
.inner {
margin-right: -16px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
滚动条由父div隐藏.
这需要你overflow:hidden在父div中使用,但在其他方面就像魅力一样.
在Firefox 64中，如果您想隐藏滚动条，overflow:auto现在就可以做到scrollbar-width: none;！呜呜！以下是相关文档（浏览器支持显示在页面底部）。
下面是一个仅 CSS 的解决方案，它将隐藏 Firefox 中的垂直和水平滚动条（在 v64 和 firefox dev 版本 v65.0b8 中进行测试）。提示：尝试在蓝色 div 上垂直和水平滚动。
div {
overflow: auto;
height: 200px;
width: 80%;
background: linear-gradient(to bottom, cyan, blue);
white-space: no-wrap;
/* the line that rules them all */
scrollbar-width: none;
/* */
}
span {
width: 200%;
height: 50%;
background: linear-gradient(to left, green, yellow);
display: inline-block;
margin: 5rem;
}<div><span></span></div>