时间戳

首页 > 解决方案 > 在旧的 Mozilla 版本中隐藏滚动条，保留滚动条

css - 在旧的 Mozilla 版本中隐藏滚动条，保留滚动条

问题描述

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

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

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

在这里我发现了这个：

#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 */
}

在这里我发现

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

谢谢你

标签： cssscrollbarmozillamodernizr

解决方案

在此处使用此 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

推荐阅读