在旧的 mozilla 版本中隐藏滚动条，保留滚动条

Question

我正在编写一个具有三个独立的可滚动图片列的布局，就像 this 页面一样。不同之处在于，在我们的设计中，图像之间只有一个像素。我设法在 chrome 和最新的 Firefox 中隐藏了滚动条。在 Firefox 63.0.1 中它们仍然存在，我需要隐藏它们同时仍然保留 - 能够单独向下滚动 div - 图片距离 1 px 或更宽仅适用于那些较旧的 firefox 版本。

大多数情况下，我尝试通过隐藏在外容器上的溢出来视觉隐藏。对于 Chrome 它有效。

 -ms-overflow-style: -ms-autohiding-scrollbar;
    ::-webkit-scrollbar {
    display: none;
    }

Here 我找到了这个：

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

并且here我发现

body.is-firefox . scroll-container {

    overflow: hidden;
    -webkit-transform: translateX(-18px);
    -ms-transform: translateX(-18px);
    transform: translateX(-18px);
}
body.is-firefox .scroll-container .inner {

    height: 100%;
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    overflow-y: scroll;
    overflow-x: hidden;

}

如果我可以在图像之间留出比 1px 更多的空白，那些会很可爱。或者我确定该设备不是最新的 Firefox，那么我也许可以使用这些技巧。

我查了一下，识别特征比识别浏览器更准确可靠。尝试使用 modernizr 了解用户浏览器支持哪些功能

.no-cssscrollbar .box { 
color: red;
 }
.cssscrollbar .box {
 color: green;
 }

不确定我是否检测到正确的功能或者它是否可以检测到我想要的。在 codepen 示例中，它似乎可以正常工作。但是如果我在我的网页上尝试 Chrome 也有那些 "no-cssscrollbar" 类虽然我在 Chrome 中看不到任何滚动条并且有可能隐藏它们。

无论如何：我在 firefox 63.0.1 中仍然有滚动条，我猜旧版本也是如此。

请帮我获得代码： - 确定使用的浏览器是否可以隐藏滚动条 - 确定使用的浏览器是否为旧版 Firefox

谢谢

Answer 1

在这里使用这个CSS：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 
only needed once */

:-moz-any(#content,#appcontent) browser{
margin-right:-14px!important;
overflow-y:scroll;
margin-bottom:-14px!important;
overflow-x:scroll;
}

来源：https://support.mozilla.org/en-US/questions/1216436#answer-1108340

在旧的 mozilla 版本中隐藏滚动条，保留滚动条

Hiding scrollbar in old mozilla versions, preserving scroll

css

mozilla

scrollbar

modernizr