溢出：滚动不显示被禁用的滚动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>