logo标签列表

在Firefox中隐藏滚动条

htmlcssfirefoxscrollbarhide
15

我想隐藏页面中的滚动条，但仍然可以像有滚动条一样滚动。

因此，我不能使用overflow:hidden，因为我希望我可以像通常一样滚动，但看不到滚动条。

所以我使用了这个CSS代码（not-scroll-body类是body标签的一个类）：

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

它在Chrome中有效，但是当我像这样使用-moz-而不是-webkit-

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

在Firefox中不起作用。

我该怎么做才能让它工作？

感谢每一个答案，对我的英语不好表示抱歉 :)

1
为什么不两者兼备呢？ - Christian Ternus
1
另外，欢迎来到StackOverflow，你的英语很好 :) - Christian Ternus
@christian 实际上，我在我的代码中同时使用两者，但它只能在Chrome中工作，而不能在Firefox中工作：') - Mei
也许你可以像这样做些什么... - Gark Garcia
7个回答
16
在Firefox 64中，如果你想隐藏带有overflow:auto的滚动条，现在可以使用scrollbar-width:none;！太棒了！以下是一个简单的CSS-only解决方案，可以在Firefox中隐藏垂直和水平滚动条（在v64和firefox dev edition v65.0b8中进行测试）。提示：在蓝色div上尝试垂直和水平滚动。 相关文档请点击这里（浏览器支持在页面底部显示）。 

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>

9
根据这个答案和我在网上找到的所有内容，似乎没有Firefox等效于-webkit-scrollbar选择器。 显然曾经有一个属性-moz-scrollbars-none可用于此，但已被删除，人们建议使用overflow:hidden或hackish的margin-right:-14px解决方案。
抱歉我不能更有帮助 - 似乎没有一种优雅的方式可以在Firefox中完成此操作。
1
我尝试使用margin-right: -14px，但滚动条的位置没有改变（它什么也没有发生），尽管内容向右侧移动（从margin-right -14）。 - Mei
请确保父元素为 overflow:hidden， หมี เมืองทอง。 - willscripted
1
overflow: hidden; 在 FF Mac 上运行良好，但在 Windows 上似乎仍需要使用 overflow: -moz-scrollbars-none;（即使在 39.0 上也是如此）。然而，MDN 表示这已经过时，因此请谨慎使用。 - dmo
现在在Firefox 64版本中已经可以实现。请查看protoEvangelion的回答。 - jwinn
5
我能够使用以下方法隐藏滚动条，但仍然可以通过鼠标滚轮进行滚动：
html {overflow: -moz-scrollbars-none;}

下载插件https://github.com/brandonaaron/jquery-mousewheel，并包含以下函数：

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });
1

参考: https://dev59.com/j2Qn5IYBdhLWcg3wpYj0#41021131

这是我的做法，只用CSS，适用于像Bootstrap这样的框架。它只需要两个额外的div:

您可以选择文本使其滚动，或者如果您有触摸屏，则可以使用手指滚动它。

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

懒人专用简短版：

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

0

我猜你想在本地隐藏滚动条。也就是说，不是在一个网页服务器上供全世界查看，而是在你本地的Firefox副本中，只为了你的“观赏愉悦”。

这是我在opensuse/kde上找到的适用方法： 在userChrome.css中；

#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}

使用-14px来完全隐藏垂直滚动条（如果您的系统主题具有更宽的滚动设置，则需要更多）。我使用较少的10px，以便只能看到一点点，这样我就可以中键单击跳转到页面上的某个位置。

我做过的事情，但不总是有效的： 在userContent.css中。

#content browser {
overflow:-moz-scrollbars-none;
}

-或-

html {
overflow: -moz-scrollbars-none;}
}

以前能用，但现在我失去了鼠标滚轮滚动。现在只有键盘箭头键可用。

希望我理解了你的需求，并且这有所帮助。 Landis。

0
0

因为我自己也在寻找这个答案，而这个帖子并没有提供最新的答案，所以我想为像我一样的新手提供答案。

#element{
 scrollbar-width: none;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接