overflow:scroll 未在 Chrome 移动设备上显示禁用的滚动条

Question

当我将 overflow: scroll 设置为 div 时，即使内容不滚动（出于设计目的）我也希望有一个滚动条

但是当不需要滚动时，chrome移动设备会隐藏滚动条。

.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 移动设备上显示禁用的滚动，或者至少是一种从纯 CSS 知道它不滚动的方式，避免使用 width: calc(100% - 17px);

Fiddle

Answer 1

在 webkit 浏览器上要有永久滚动条，您可以使用 ::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>

overflow:scroll 未在 Chrome 移动设备上显示禁用的滚动条

overflow:scroll not showing a disabled scroll on Chrome Mobile

html

css

mobile-chrome