Question

我刚刚发现了如何隐藏Google Chrome中的滚动条，我使用此代码进行了操作：

::-webkit-scrollbar { display: none; }

唯一的问题是这不适用于Firefox。试过很多方法但是它仍然不起作用。

Answer 1

您可以使用scrollbar-width规则。您可以scrollbar-width: none;隐藏Firefox中的滚动条，但仍然可以自由滚动。

body {
   scrollbar-width: none
}

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

Answer 3

对于webkit使用以下：

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

对于Mozilla Firefox，请使用以下代码：

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

如果滚动不起作用，请添加

element {overflow-y: scroll;}

到特定元素

Answer 4

要在Chrome，Firefox和IE上隐藏滚动条，可以使用以下方法：

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}

Answer 5

这是一种通用的解决方案：

<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：隐藏在父div中。

Answer 6

我使用了它，并且奏效了。 https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

注意：用户代理必须将在根元素上设置的任何滚动条宽度值应用于视口。

Answer 7

对于Firefox的最新版本，旧的解决方案不再起作用，但我在v66.0.3中成功使用了scrollbar-color属性，可以将其设置为transparent transparent，这将使滚动条在桌面上的Firefox中至少是不可见的（仍然发生在视口中，在移动设备上不起作用，但是滚动条上的细线位于右侧的内容上方）。

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

Answer 8

::-webkit-scrollbar {
  display: none;
}

该功能在Firefox中不起作用，因为Firefox放弃了对具有功能的隐藏滚动条的支持（您可以在旧版本中使用overflow: -moz-scrollbars-none;）。

Answer 9

尝试使用：

Answer 10

在某些特殊情况下（该元素位于屏幕的右侧，或者其父溢出被隐藏），这可以是一种解决方案：

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}

Answer 11

这是我在保留Firefox，Chrome和Edge中的滚动条时需要禁用滚动条的原因：

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

Answer 12

我尝试了所有方法，最有效的解决方案是始终显示垂直滚动条，然后添加一些负边距将其隐藏。

这适用于IE11，FF60.9和Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

Answer 13

以防万一，如果有人正在寻找破解方法，以某种方式使滚动条在firefox（79.0）中不可见。

这是一个可成功用于Chrome，IE，Safari的解决方案，并使滚动条在Firefox中透明。上面的方法都不能真正地隐藏滚动条，而不能用于firefox（79.0）。

请任何人找到一种不改变颜色的方法，这将非常有帮助。请在下面评论。

.scrollhost::-webkit-scrollbar {
  display: none;
}

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Answer 14

通过将其放入create-react-app中，可以使用App.css在ReactJS中为我工作：

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

此外，body元素具有overflow: auto

Answer 15

如果您希望滚动条在整个身体上消失并且仍然具有功能，请将其添加到 html 代码顶部的样式标签下。这为我解决了问题。

参考：https://careerkarma.com/blog/hide-scrollbar/

      * {

           scrollbar-width: none; /* Firefox implementation */

       }

Answer 16

在正文上添加css规则：

body{
  overflow: hidden;
}

如何在Firefox中隐藏滚动条？

16 个答案: