如何在 Firefox 中隐藏滚动条而不停止在 div 中滚动

Posted 2023-03-06

【中文标题】如何在 Firefox 中隐藏滚动条而不停止在 div 中滚动

【英文标题】：How to hide scrollbar in Firefox without stop scrolling in div

【发布时间】：2019-01-28 08:34:53

【问题描述】：

如何在 mozila firefox 中隐藏滚动条而不停止在 div 中滚动。

我在css下面使用过，但我不想在我添加了滚动条的div中添加“overflow-x:hidden”。我也不能使用 jQuery 相关的滚动条插件，因为我添加了 3 级嵌套菜单，所以它与打开的二级菜单冲突。

margin-right: -16px;
overflow-y: scroll;
overflow-x: hidden;

我也用过下面的css，但它在firefox中不起作用。

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

如果您对此问题有任何与 CSS/jQuery 相关的建议，请告诉我。

【问题讨论】：

How to hide scrollbar in Firefox?的可能重复

How to hide scrollbar from body using jquery的可能重复

【参考方案1】：

您必须将可滚动的 div 包装在另一个 div 中，使用 overflow:hidden 隐藏滚动条。

   #wrap 
        width: 150px;
        overflow: hidden;
        outline: 1px solid yellow;
    
    
    #scroll 
        width: 170px;
        height: 100px;
        overflow: auto;
        background: blue;
        color: white;
    

<div id="wrap">
        <div id="scroll">
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>      
        </div>
    </div>

【讨论】：

它工作正常，但不适用于我的场景，因为如果我应用您的解决方案，则不会显示二级菜单

也许你应该粘贴完整的结构来看看你已经拥有什么