javascript - 如何在 FireFox 的内容上显示滚动条？

Question

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

铬滚动条：

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

火狐滚动条：

//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 提供解决方案，那也很有帮助。

标签： javascriptjquerycssreactjsscrollbar

Answer 1

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

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

另请参阅 Stackverflow 中的此处：
Firefox 的自定义 CSS 滚动条

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