css - 在旧的 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