有没有办法让自定义滚动条只在 Firefox 中使用 css？我发现这个适用于 chrome 但不是适用于 Firefox答案

【问题标题】：Is there any way to have custom scrollbar using css only in Firefox?? I found this for chrome but not for Firefox有没有办法让自定义滚动条只在 Firefox 中使用 css？我发现这个适用于 chrome 但不是适用于 Firefox
【发布时间】：2016-06-16 19:14:19
【问题描述】：

我想要一个用于我的网站的自定义滚动条，我在 chrome 上找到了这个，但在 firefox 上没有。我不想使用繁重的 jQuery 插件，是否可以仅使用 css 来做到这一点？我为 Chrome 找到的 CSS：

::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }

【问题讨论】：

Custom CSS Scrollbar for Firefox的可能重复

标签： css firefox scrollbar

【解决方案1】：

无法通过 Firefox（和大多数其他浏览器）中的 CSS 实现。但是，可以在 XUL 应用程序（例如 Firefox 的附加组件）中设置滚动条样式。

【讨论】：

【解决方案2】：

Firefox 不再支持此功能。检查此错误报告：

https://bugzilla.mozilla.org/show_bug.cgi?id=547260

【讨论】：

【解决方案3】：

如果你通过 css 以某种方式访问 firefox，那么 IE 和 safari 也会创建问题。最好使用 jquery 插件作为滚动条

【讨论】：

【解决方案4】：

从 Firefox 版本 64 开始，您可以使用以下 two css properties 为滚动条提供样式和颜色。

滚动条宽度滚动条颜色

.scrollable {
    scrollbar-width: thin;
    scrollbar-color: #3487ab #efefef;
}

.scrollable {
  background-color: #a3d5d3;
  height: 100%;
  overflow-y: auto;
  width: 240px;
  height: 120px;
}

  <div class="scrollable">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
  </div>

【讨论】：