溢出：滾動不顯示被禁用的滾動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>