Firefox滚动条隐藏
Posted
技术标签:
【中文标题】Firefox滚动条隐藏【英文标题】：firefox scroll bar hidden 【发布时间】：2013-03-01 21:42:19 【问题描述】：如何在 overflow:auto 时隐藏 Firefox 滚动条？
::-webkit-滚动条 显示：无；
我使用此代码，但这仅适用于 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;
【问题讨论】：
你为什么不用overflow: hidden？
我会试试的，先生，谢谢。但是在使用 overflow:auto 时无法在 Firefox 中隐藏滚动条？
它不工作我看不到我的页脚：|
overflow-x: hidden。如果我们能看到您的代码，会更容易提供帮助。
等我编辑我的帖子
【参考方案1】：
我没有找到任何特定于 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隐藏。
这要求您在父 div 中使用 overflow:hidden，但在其他方面就像一个魅力。
【讨论】：
如果您选择此选项，请考虑到每个浏览器上滚动条的大小不同，请特别注意触摸屏设备。 当内部 div 内容长于屏幕宽度时，它在 FF 56 上不起作用 调整边距是一个很好的解决方法（请注意，如果要隐藏水平滚动条，请使用 margin-bottom: -17px;）。我个人会使用 17px 而不是 16px，因为我认为这是滚动条的宽度/高度。【参考方案2】：在 firefox 64 中，如果您想在拥有 overflow:auto 时隐藏滚动，您现在可以使用 scrollbar-width: none;！呜呜！ Here are the relevant docs（浏览器支持显示在页面底部）。
下面是一个纯 CSS 解决方案，它将隐藏您在 firefox 中的垂直和水平滚动条（在 v64 和 firefox dev edition 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>【讨论】：
这是一个实验性功能！所以它需要更多的时间来获得批准 被低估的评论，这实际上解决了 Firefox 的问题。我知道这是旧的，但谢谢！以上是关于Firefox滚动条隐藏的主要内容，如果未能解决你的问题，请参考以下文章