在Firefox中隐藏滚动条答案

【问题标题】：Hide scrollbar in firefox在Firefox中隐藏滚动条
【发布时间】：2013-11-04 00:17:54
【问题描述】：

我想在页面中隐藏一个滚动条，但我可以像它有滚动条一样滚动。所以我不能使用溢出：隐藏，因为我希望我可以像往常一样滚动但看不到滚动条。

所以我用这个css代码（class not-scroll-body是body标签的一个类）

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

它可以在 Chrome 中使用，但是当我像这样使用 -moz- 而不是 -webkit- 时

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

它在 Firefox 中不起作用。

我能做些什么来让它发挥作用？

感谢您的每一个回答，并为我糟糕的英语感到抱歉:)

【问题讨论】：

为什么不两者都用？
另外，欢迎来到 StackOverflow，你的英语很好:)
@christian 实际上，我在我的代码中都使用了这两种方法，但它只适用于 Chrome，不适用于 firefox :')
也许你可以做类似this...

标签： html css firefox scrollbar hide

【解决方案1】：

根据this answer 和我在网上找到的所有内容，没有与-webkit-scrollbar 选择器等效的Firefox。显然 used to be 有一个属性 -moz-scrollbars-none，您可以使用它，但它已被删除，人们 recommend 使用 overflow:hidden 或一个 hackish margin-right: -14px 解决方案。

抱歉，我无法提供更多帮助 - 似乎没有 Firefox 方法可以优雅地做到这一点。

【讨论】：

我尝试了 margin-right: -14px ，但是滚动条没有改变位置（没有发生任何事情），尽管里面的内容改变了右边的位置（从 margin-right -14）跨度>
หมี เมืองทอง - 确保父元素是overflow:hidden
overflow: hidden; 在 FF Mac 上运行良好，但您似乎仍然需要在 Windows 上使用 overflow: -moz-scrollbars-none;（即使在 39.0 上）。但是 MDN 声明这已经过时了，所以请谨慎使用。
现在可以在 Firefox 版本 64 中使用。请参阅 protoEvangelion 的答案。

【解决方案2】：

我可以隐藏滚动条，但仍然可以使用此解决方案使用鼠标滚轮滚动：

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);
  });

【讨论】：

【解决方案3】：

我假设您想在本地隐藏滚动条。我的意思是，不是在网络服务器上供全世界查看，而是在您本地的 Firefox 副本上，仅供您“观看乐趣”。

这是我发现在 opensuse/kde 上为我工作的内容：在 userChrome.css 中；

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

使用 -14px 完全隐藏垂直滚动（如果您的系统主题有更宽的滚动设置，则更多）。我使用 less (10px) 来查看其中的一小部分，因此我可以单击鼠标中键跳转到页面上的某个位置。

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

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

-或-

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

上面曾经工作，但我现在失去了鼠标滚轮滚动。现在只有键盘箭头键有效。

希望我了解您想要什么，这会有所帮助。兰迪斯。

【讨论】：

【解决方案4】：

您也许可以使用overflow:-moz-hidden-unscrollable——这非常适合我的需求，部分原因是我已经在使用dragscroll.js。

【讨论】：

【解决方案5】：

cf：https://stackoverflow.com/a/41021131/4881677

这就是我的做法，只有 CSS 并且适用于 bootstrap 等框架。它只需要2个额外的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>

【讨论】：

【解决方案6】：

在 firefox 64 中，如果您想在拥有 overflow:auto 时隐藏滚动，您现在可以使用 scrollbar-width: none;！呜呜！ Here are the relevant docs（浏览器支持显示在页面底部）。

下面是一个简单的纯 CSS 解决方案，它将隐藏您在 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;
}

&lt;div class="not-scroll-body"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

因为我自己正在寻找它并且这个线程没有提供更新的答案，所以我会像我自己一样将它提供给其他新人。

#element{
 scrollbar-width: none;
}

【讨论】：