Fatal编程技术网
  • css/
  • Css 如何在Firefox中隐藏滚动条？

Css 如何在Firefox中隐藏滚动条？

css firefox

Css 如何在Firefox中隐藏滚动条？,css,firefox,Css,Firefox,我刚刚发现如何在Google Chrome中隐藏滚动条，我用以下代码实现了这一点： ::-webkit-scrollbar { display: none; } 唯一的问题是，这在Firefox上不起作用。我尝试了很多方法，但仍然不起作用。这是一个通用的解决方案： <div class="outer"> <div class="inner"> Some content... </div> </div> <style>

我刚刚发现如何在Google Chrome中隐藏滚动条，我用以下代码实现了这一点：

::-webkit-scrollbar { display: none; }
唯一的问题是，这在Firefox上不起作用。我尝试了很多方法，但仍然不起作用。

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

<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>

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

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


一些内容。。。
.外部{
溢出：隐藏；
}
.内部{
右边距：-16px；
溢出y：滚动；
溢出x：隐藏；
}
滚动条被父div隐藏

这要求您在父分区中使用overflow:hidden。

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

<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>

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

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}
下载插件并包含以下功能：

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);
  });
尝试使用以下方法：

overflow-y:-moz隐藏不可滚动
用于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;}


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


<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>



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



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



您可以使用
滚动条宽度
规则。您可以
滚动条宽度：无
在Firefox中隐藏滚动条，并且仍然可以自由滚动


body {
   scrollbar-width: none;
}



要隐藏Chrome、Firefox和IE上的滚动条，您可以使用：


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



这就是我在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 */
          }



对于较新版本的Firefox，旧的解决方案不再有效，但我在v66.0.3中成功地使用了
滚动条颜色
属性，您可以将其设置为
透明
，这将使桌面上Firefox中的滚动条至少不可见（仍然发生在视口中，在移动设备上不起作用，但在那里，滚动条是一条细线，位于右侧的内容上）

我用了这个，它成功了。



注意：用户代理必须将根元素上设置的任何滚动条宽度值应用于视口。
我尝试了所有方法，最有效的解决方案是始终显示垂直滚动条，然后添加一些负边距以隐藏它

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


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



它在Firefox中不起作用，因为Firefox放弃了对隐藏滚动条的支持（在旧版本中，您可以使用
溢出：-moz scrollbars none；
）。
以防万一，如果有人想找一个黑客，以某种方式使滚动条在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 */
}



我在ReactJS中使用了
创建react应用程序
，通过将其放入我的
app.css
：


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



另外，
body
元素有
溢出：auto
这样做似乎不是一个好主意。使用隐藏在html、body上的css溢出，并使用100%高度和宽度的包装div。这可能有点太明显了，但您尝试过Firefox的-moz吗？不过我同意abhitalks，这似乎不是一个好主意是的。一个可行的解决方案可行，但不可靠，因为16px只是一个假定的滚动条宽度。复制时请将分数归功于真正的作者@chowey。当内部div内容长于屏幕宽度时，它在FF 56上不起作用。此修复方案解决了FF的问题，但在其他浏览器中有更糟糕的副作用（剪切文本）我可以很容易地看到我自己在所有需要在我的应用程序上滚动的div中使用它……这似乎相当于“溢出：隐藏”；并且不允许滚动：-（适用于我-水平滚动条现在隐藏在Firefox中。谢谢！从Firefox 63开始，只有在Firefox的功能设置中将
layout.css.overflow.moz滚动条设置为
enabled
至
true
时，水平滚动条才起作用，这不适合于生产使用。但是，将滚动条宽度设置为：无；在html中设置为。It隐藏
滚动条
但停止滚动动作。
overflow-y:-moz hidden unbrolleble；
和
overflow:hidden
之间有什么区别呢？实际上没什么，所以这不是正确的答案。但是我给你一个投票。谢谢。区别是第一个只在Firefox中隐藏它。我投票支持你，但这太奇怪了告诉我你为什么
-2
？你的答案是正确的问题是如何隐藏滚动条，但在内容溢出时仍能让用户在需要时滚动，而不是完全禁用滚动条。原因是FF滚动条很难看，有时即使内容没有溢出也会出现。所有其他浏览器都提供简单而优雅的css解决方案-可能我需要说，即使是IE！这在最新的浏览器上也能工作，但请注意这仍然是一个。此外，请记住，此属性应该与生成滚动条的元素一起使用。例如，如果您使用的是Angular Material的
md内容
，则主体不会生成滚动条，而不是
md content
元素。因此，
body{scrollbar width:none；}
将不起作用，但是
md content{scrollbar width:none；}
will.Ah！最后是这样的！在FF70+中如何操作？
滚动条宽度：无；
不再工作。我需要隐藏滚动条，而不是使其透明。