在Firefox中隐藏滚动条

时间:2013-10-25 03:00:35

标签: html css firefox scrollbar hide

我想在页面中隐藏滚动条,但我可以像滚动条那样滚动。 所以我不能使用溢出:隐藏,因为我想我可以像往常一样滚动 但是看不到滚动条。

所以我使用这个css代码(类not-scroll-body是一类body标签)

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

适用于Chrome ,但当我使用-moz-代替-webkit-

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

它在Firefox中不起作用。

我该怎么做才能让它发挥作用?

感谢您的每一个答案,对不起我的英语不好:)

7 个答案:

答案 0 :(得分:9)

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

抱歉,我无法提供更多帮助 - 似乎没有Firefox方法可以优雅地执行此操作。

答案 1 :(得分: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);
  });

答案 2 :(得分:3)

firefox 64 中,如果要在拥有overflow:auto后隐藏滚动,则可以执行scrollbar-width: none;!哇! Here are the relevant docs浏览器支持显示在页面底部)。

下面是一个简单的 css专用解决方案,它将在firefox中隐藏垂直和水平滚动条(在v64和firefox开发版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>

答案 3 :(得分:1)

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>

答案 4 :(得分: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;
}

-OR -

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

以上用于工作,但我现在已经丢失了鼠标滚轮。现在只有键盘箭头键可以使用。

希望我理解你想要什么,这有帮助。 兰迪斯。

答案 5 :(得分:0)

您可以使用overflow:-moz-hidden-unscrollable - 这部分完全符合我的需求,因为我已经在使用dragscroll.js

答案 6 :(得分:0)

由于我自己在寻找它,并且该线程未提供更新的答案,因此我将自己提供给其他新手。

#element{
 scrollbar-width: none;
}