Переполнение: прокрутка не отображает отключенную прокрутку в Chrome Mobile

Question

Когда я установил overflow: scroll в div, я ожидаю иметь полосу прокрутки, даже когда содержимое не прокручивается (для целей дизайна)

но когда нет необходимости прокручивать, Chrome Mobile в любом случае скрывает полосу прокрутки.

.div-scroll{
  background-color: red;
  height: 300px;
  overflow-y: scroll;
}
.div-inner {
  background-color: blue;
  height: 200px;
}

<div class="div-scroll">
  <div class="div-inner">
  </div>
</div>

Я хотел бы показать отключенную прокрутку на Chrome Mobile, когда контент не прокручивается, или, по крайней мере, узнать, что из чистого CSS не прокручивается, чтобы избежать использования width: calc(100% - 17px);

скрипка

Answer 1

В веб-браузерах, чтобы иметь постоянную полосу прокрутки, вы можете использовать ::webkit-scrollbar::webkit-scrollbar-thumb свойства и настроить их.

См. Следующий код:

.filter-list {
  width: 75px;
  height: 100px;
  overflow: auto;
}

.filter-list::-webkit-scrollbar,
.filter-list::-webkit-scrollbar,
.filter-list::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 15px;
}

.filter-list::-webkit-scrollbar-thumb,
.filter-list::-webkit-scrollbar-thumb,
.filter-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: lightgray;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

<div class="filter-list">
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
</div>