当我将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 Mobile上显示残疾人滚动,或者至少从纯CSS了解不滚动的一种方法,以避免使用width: calc(100% - 17px);
小提琴
在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>