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

Question

如何在 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 相关的建议，请告诉我。

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