自定义 CSS 滚动条仅适用于 chrome答案

【问题标题】：Custom CSS scroll bar only work on chrome自定义 CSS 滚动条仅适用于 chrome
【发布时间】：2016-11-17 19:45:35
【问题描述】：

我一直在做一个涉及自定义滚动条的项目，这里是代码

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}


#style-2::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #D62929;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
    <div class="scrollbar" id="style-2">
      <div class="force-overflow"></div>
    </div>
 </body>

问题是它只在 chrome 上工作，我怎样才能让它在每个浏览器上工作。我已经搜索了整个互联网，但仍然无法找到任何可靠的解决方案。在此先感谢

【问题讨论】：

stackoverflow.com/questions/6165472/…
CSS customized scroll bar in div的可能重复

标签： css html

【解决方案1】：

对不起朋友 firfox，Opera Mini 和 Edge 不支持 scrollbarstyle
你可以在这里查看 check it

【讨论】：

不客气。这是我第一次实现堆栈溢出。 :)

【解决方案2】：

-WebKit- 适用于 Chrome 和 safari，不确定其他浏览器是否支持自定义滚动条，但我认为它们不支持

【讨论】：