如何在 FireFox 的内容上显示滚动条？答案

【问题标题】：How to show scrollbar over the content in FireFox?如何在 FireFox 的内容上显示滚动条？
【发布时间】：2021-05-16 20:33:03
【问题描述】：

如何在 mozaila firefox 中的 div 内容上显示我的滚动条，我能够在 chrome 中实现相同的功能，这就是它在 chrome 中的外观，并且 chrome 输出也是所需的输出。

ChromeScrollBar：

但在 Firefox 中我无法实现相同的功能。有什么方法可以实现吗，FireFox的结果如下图。

FireFoxScrollBar：

//App.js
import './App.css';

function App() {
  return (
    <div class="main">
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
    <div class="my-custom">
      working in crome
    </div>
  </div>
  );
}

export default App;

//App.css
.main::-webkit-scrollbar {
  width: 7px;
}
.main::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10rem;
  border: 1px solid #fff;
}

.main::-webkit-scrollbar-track-piece:start {
  background: transparent;
}

.main::-webkit-scrollbar-track-piece:end {
  background: transparent;
}
.main {
  width: 250px;
  height: 400px;
  background: #fff;
  border: 1px solid #7b7d7f;
  overflow: overlay;
}

.my-custom {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}
.my-custom:hover {
  background-color: grey;
}

寻找解决方案如何在FirFox中实现同样功能的滚动条。

如果有人可以使用 jquery 提供解决方案，那也很有帮助。

【问题讨论】：

标签： javascript jquery css reactjs scrollbar

【解决方案1】：

看来，Firefox 中的 css 解决方案尚不可能，因为 Firefox 不支持它：

https://caniuse.com/?search=scrollbar-thumb

另请参阅 Stackverflow：
Custom CSS Scrollbar for Firefox

但是，如果您仔细查看第二个链接，似乎有一种方法可以在 javascript 中进行。也许你想检查一下。

【讨论】：

【解决方案2】：

FireFox 不支持自定义滚动条（带有 css）。正如Mozilla提到的here：This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.

你可以使用SimpleBar，效果很好。

【讨论】：