как сделать 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 указывает на то, что Firefox 64 предлагает ограниченную поддержку для стилизации полос прокрутки; который пытается соответствовать определенным стандартам W3C, описанным здесь CSS Scrollbars Module Уровень 1 .

Это "добавляет два новых свойства ширины полосы прокрутки и цвета полосы прокрутки, которые дают некоторый контроль над тем, как отображаются полосы прокрутки."

Я попытаюсь привести вам пример ниже в этой скрипке,

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>

Answer 2

редактировать css вы должны добавить строку -moz-Appearance. Подробности можно посмотреть по ссылке ниже;

Пример

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Подробнее

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

.item-list {
  scrollbar-color: rgba(255,255,255,.5);
  scrollbar-width: thin;
}
.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);
}

Если вы хотите показывать полосу прокрутки всегда, вы должны использовать минимальную высоту css

  .insider {min-height:250px; }
  .item-list { width: 200px; height: 200px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0); }
  .item-list {

    scrollbar-color: rgba(255,255,255,.5);
    scrollbar-width: thin;
  }
  .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="insider">
  </div>
</div>