overflow: scroll ne pas montrer un parchemin désactivé sur Chrome mobile

Question

Quand je mis overflow: scroll à une div, je me attends d'avoir une barre de défilement, même si le contenu ne défile pas (pour la conception)

mais quand il y a pas besoin de faire défiler, chrome mobile cache la barre de défilement de toute façon.

.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>

Je voudrais montrer un parchemin désactivé sur Chrome mobile lorsque le contenu ne défile pas, ou tout au moins un moyen de savoir de CSS pur qui ne défile pas, pour éviter d'utiliser width: calc(100% - 17px);

Fiddle

Answer 1

sur les navigateurs WebKit d'avoir une barre de défilement permanente, vous pouvez utiliser l'utilisation du ::webkit-scrollbar::webkit-scrollbar-thumb propriétés et les personnaliser.

referez code suivant:

.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>