blocks|key|1570767|text|根据这个答案和我在网上找到的所有东西，火狐没有相当于-webkit-scrollbar选择器的东西。显然，这里有一个属性，曾经是，-moz-scrollbars-none，您可以用来处理这个问题，但是它已经被删除了，人们使用的是overflow:hidden或恶意的margin-right:+-14px解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1570768|对不起，我不能提供更多的帮助--似乎没有什么Firefox可以优雅地做到这一点。|1570769|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/13531813/webkit-and-mozilla-altering-of-the-scrollbar|1|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow^0|Q|H|1T|K|36|F|3P|J|2|4|0|1P|3|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]|$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<p>According to <a href="https://stackoverflow.com/questions/13531813/webkit-and-mozilla-altering-of-the-scrollbar">this answer</a> and everything I've been able to find on the web, there's no Firefox equivalent of the <code>-webkit-scrollbar</code> selector. Apparently there <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow" rel="noreferrer">used to be</a> a property, <code>-moz-scrollbars-none</code>, that you could use for this, but it's since been removed and people <a href="http://support.mozilla.org/en-US/questions/957337" rel="noreferrer">recommend</a> using <code>overflow:hidden</code> or a hackish <code>margin-right: -14px</code> solution.</p>

<p>Sorry I can't be more helpful -- it seems like there's no Firefox way to do this elegantly.</p>


blocks|key|2647985|text|我能够隐藏滚动条，但仍然能够使用此解决方案使用鼠标轮滚动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2647986|html+{overflow:+-moz-scrollbars-none;}|code-block|syntax|javascript|2647987|下载插件https://github.com/brandonaaron/jquery-mousewheel并包含以下功能：|offset|length|2647988|jQuery('html,body').bind('mousewheel',+function(event)+{
++++event.preventDefault();
++++var+scrollTop+=+this.scrollTop;
++++this.scrollTop+=+(scrollTop+%2B+((event.deltaY+*+event.deltaFactor)+*+-1));
++++//console.log(event.deltaY,+event.deltaFactor,+event.originalEvent.deltaMode,+event.originalEvent.wheelDelta);
++});|2647989|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/brandonaaron/jquery-mousewheel^0|0|0|4|1D|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I was able to hide the scrollbar but still be able to scroll with mousewheel with this solution:</p>

<pre><code>html {overflow: -moz-scrollbars-none;}
</code></pre>

<p>Download the plugin <a href="https://github.com/brandonaaron/jquery-mousewheel" rel="nofollow">https://github.com/brandonaaron/jquery-mousewheel</a> and include this function:</p>

<pre><code>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);
  });
</code></pre>


blocks|key|2648018|text|我假设您想在本地隐藏滚动条。我的意思是，不是在web服务器上让世界看到，而是在你本地的火狐版本上，只为你的“观看乐趣”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2648019|这就是我发现在opensuse/kde:+in+userChrome.css上对我有用的东西；|2648020|#content+browser+{
margin-right+-12px+!important;
overflow-x:hidden;
overflow-y:scroll;
}|code-block|syntax|javascript|2648021|使用-14+to完全隐藏垂直滚动(如果您的系统主题有更大的滚动设置)。我使用较少的(10+so+)只看到一点点，所以我可以点击中间跳到页面上的一个地方。|2648022|我做过的事，但不再起作用了:在userContent.css|2648023|#content+browser+{
overflow:-moz-scrollbars-none;
}|2648024|-或者-|2648025|html+{
overflow:+-moz-scrollbars-none;}
}|2648026|上面的工作，但我现在我失去了鼠标轮卷轴。现在只有键盘箭头才能工作。|2648027|希望我能理解你想要什么，这有帮助。兰迪斯。|2648028|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>I assuming you want to hide the scrollbar locally. In that i mean, not on a web server for the world to see, but on your local copy of firefox, for your 'viewing pleasure' only.</p>

<p>this is what I've found to work for me on opensuse/kde:
in userChrome.css;</p>

<pre><code>#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}
</code></pre>

<p>use -14px to completely hide vertical-scroll (more if your system theme has wider scroll setting). I use less (10px) to see just a little of it so I can middle-click to jump to a place on the page.</p>

<p>thing that i did, but don't always work, any longer:
in userContent.css</p>

<pre><code>#content browser {
overflow:-moz-scrollbars-none;
}
</code></pre>

<p>-or-</p>

<pre><code>html {
overflow: -moz-scrollbars-none;}
}
</code></pre>

<p>above used to work, but I now I've lost the mouse-wheel scroll. Only keyboard arrow keys work now.</p>

<p>Hope I understood what you want and this helps.
Landis.</p>


blocks|key|1570838|text|您可能可以使用溢出：-moz-隐藏-不可滚动+--这在一定程度上满足了我的需要，因为我已经在使用dragscroll.js了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1570839|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions|1|https://github.com/asvd/dragscroll^0|7|F|0|1C|D|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>You might be able to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions" rel="nofollow">overflow:-moz-hidden-unscrollable</a> -- this worked perfectly for my needs in part because I was already using <a href="https://github.com/asvd/dragscroll" rel="nofollow">dragscroll.js</a>.</p>


blocks|key|2648057|text|cf：https://stackoverflow.com/a/41021131/4881677|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2648058|这就是我是如何做到的，只有CSS和良好的工作框架，如引导。它只需要2个额外的div：|2648059|您可以选择文本使其滚动或滚动它的手指，如果你有一个触摸屏。|2648060|​|2648061|.overflow-x-scroll-no-scrollbar+{overflow:hidden;}
.overflow-x-scroll-no-scrollbar+div+{
++overflow-x:hidden;
++margin-bottom:-17px;
++overflow-y:hidden;
++width:100%25;
}
.overflow-x-scroll-no-scrollbar+div+*+{
++overflow-x:auto;
++width:100%25;
++padding-bottom:17px;
++white-space:+nowrap;+
++cursor:pointer
}

/*+the+following+classes+are+only+here+to+make+the+example+looks+nicer+*/
.row+{width:100%25}
.col-xs-4+{width:33%25;float:left}
.col-xs-3+{width:25%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}|code-block|syntax|javascript|2648062|<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>|2648063|2648064|懒人的简短版本：|2648065|2648066|.overflow-x-scroll-no-scrollbar+{overflow:hidden;}
.overflow-x-scroll-no-scrollbar+div+{
++overflow-x:hidden;
++margin-bottom:-17px;
++overflow-y:hidden;
++width:100%25;
}
.overflow-x-scroll-no-scrollbar+div+*+{
++overflow-x:auto;
++width:100%25;
++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}|2648067|<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>|2648068|2648069|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/41021131/4881677^0|3|18|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1C|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1E|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|L|7|1F|8|@]|9|@]|C|$M|N]]|$1|Q|3|I|5|6|7|1G|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1H|8|@]|9|@]|C|$]]|$1|T|3|I|5|6|7|1I|8|@]|9|@]|C|$]]|$1|U|3|V|5|L|7|1J|8|@]|9|@]|C|$M|N]]|$1|W|3|X|5|L|7|1K|8|@]|9|@]|C|$M|N]]|$1|Y|3|I|5|6|7|1L|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|10|$11|$5|12|13|14|C|$15|16]]]]

<p>cf: <a href="https://stackoverflow.com/a/41021131/4881677">https://stackoverflow.com/a/41021131/4881677</a></p>

<p>This is how I do it, only CSS and works well with frameworks like bootstrap. It only needs 2 extra div:</p>

<p>You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;&lt;body&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-4 bg-orange"&gt;Column 1&lt;/div&gt;
    &lt;div class="col-xs-3 bg-gray"&gt;Column 2&lt;/div&gt;
    &lt;div class="col-xs-4 bg-blue"&gt;Column 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-4 bg-orange-light"&gt;Content 1&lt;/div&gt;
    &lt;div class="col-xs-3 overflow-x-scroll-no-scrollbar"&gt;
      &lt;div&gt;
        &lt;div&gt;This content too long for the container, so it needs to be hidden but scrollable without scrollbars&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 bg-blue-light"&gt;Content 3&lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Short version for lazy people:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent-style overflow-x-scroll-no-scrollbar"&gt;
  &lt;div&gt;
    &lt;div&gt;This content too long for the container, so it needs to be hidden but scrollable without scrollbars&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1570922|text|在火狐64中，如果你想在有overflow:auto的时候隐藏滚动，你现在可以做scrollbar-width:+none;了！woop！这是相关的文档+(浏览器支持显示在页面底部)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1570923|下面是一个简单的css解决方案，它将在火狐中隐藏垂直和水平滚动条(在v64+&+firefox版本v65.0b8中进行测试)。提示：尝试在蓝色div上进行垂直和水平滚动。|1570924|​|1570925|.not-scroll-body+{
++overflow:+auto;
++height:+200px;
++width:+90%25;
++background:+linear-gradient(to+bottom,+cyan,+blue);
++white-space:+no-wrap;

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

span+{
++width:+200%25;
++height:+400%25;
++background:+linear-gradient(to+left,+green,+yellow);
++display:+inline-block;
++margin:+5rem;
}|code-block|syntax|javascript|1570926|<div+class="not-scroll-body"><span></span></div>|1570927|1570928|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width^0|1|4|D|D|14|M|1X|7|0|0|8|7|1R|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|D]|$9|15|A|16|B|D]]|E|@$9|17|A|18|1|19]]|F|$]]|$1|G|3|H|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|E|@]|F|$]]|$1|I|3|J|5|6|7|1F|8|@]|E|@]|F|$]]|$1|K|3|L|5|M|7|1G|8|@]|E|@]|F|$N|O]]|$1|P|3|Q|5|M|7|1H|8|@]|E|@]|F|$N|O]]|$1|R|3|J|5|6|7|1I|8|@]|E|@]|F|$]]|$1|S|3|-4|5|6|7|1J|8|@]|E|@]|F|$]]]|T|$U|$5|V|W|X|F|$Y|Z]]]]

<p>In <strong>firefox 64</strong>, if you want to hide scroll when you have <code>overflow:auto</code> you can now do <code>scrollbar-width: none;</code>! Woop woop! <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width" rel="noreferrer">Here are the relevant docs</a> (<em>browser support is show at bottom of page</em>).</p>

<p>Below is a simple <strong>css only solution</strong> that will hide your vertical and horizontal scrollbar in firefox (<em>tested in v64 &amp; firefox dev edition v65.0b8</em>). <strong>Hint</strong>: <em>try vertical and horizontal scrolling on the blue div</em>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="not-scroll-body"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1570949|text|由于我是自己寻找它，而这条线没有提供更新的答案，我会提供给其他新来的人作为我自己。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1570950|#element{
+scrollbar-width:+none;
}|code-block|syntax|javascript|1570951|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>As I was looking for it myself and this thread is not providing the updated answer, I would provide it for other newcomers as myself.</p>
<pre><code>#element{
 scrollbar-width: none;
}
</code></pre>


<p>I want to hide a scroll bar in page but I can scroll like it has a scroll bar.
so I cant use overflow:hidden because I want that I can scroll like normal 
but cannot see a scroll bar.</p>

<p>so I use this css code (class not-scroll-body is a class of body tag)</p>

<pre><code>.not-scroll-body::-webkit-scrollbar {
    display: none; 
}
</code></pre>

<p><em>It works in Chrome</em> , but when I use <code>-moz-</code> instead of <code>-webkit-</code> like this</p>

<pre><code>.not-scroll-body::-moz-scrollbar {
    display: none; 
}
</code></pre>

<p><em>It doesn't work in Firefox.</em></p>

<p>What can I do to to make it work?</p>

<p>Thank you for every answer and sorry for my poor english language :)</p>


Hide scrollbar in firefox

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在页面中隐藏滚动条，但我可以滚动，就像它有滚动条一样。所以我不能使用溢出:隐藏，因为我希望我可以像普通滚动，但不能看到滚动条。所以我使用这个css代码(类非滚动体是一个身体标记的类)。.not-scroll-body::-webkit-scrollbar {    display: none; }它在Chrome中...

问在firefox中隐藏滚动条
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在firefox中隐藏滚动条EN