css - 如何让 Scroll 在 Firefox 中可见

Question

我有一个在 chrome 中可见的滚动条，但它不支持 firefox。任何建议。

<div class="item-list">
</div>

.item-list::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance:none;
  width: 10px;
}

.item-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  height: 80px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Answer 1

这stackoverflow post似乎表明 Firefox 64 对样式滚动条的支持有限；它试图满足此处概述的已定义 W3C 标准 CSS Scrollbars Module Level 1 .

这“添加了 scrollbar-width 和 scrollbar-color 两个新属性，它们可以控制滚动条的显示方式。”

我试图在下面这个 fiddle 中给你一个例子，

body {
  overflow: hidden;
}

.item-list {
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
}

.content {
  height: 1000px;
}

.item-list::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 10px;
}

.item-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  height: 80px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

<div class="item-list">
  <div class="content">
  </div>
</div>