如何设置滚动条可见？答案

【问题标题】：How to set scroll bar ever visible?如何设置滚动条可见？
【发布时间】：2019-06-04 03:29:42
【问题描述】：

如何设置滚动条在 div 中可见？

.table-wrapper.grouped {
    max-height: 300px;
    overflow-y: scroll;
}

只有当我尝试滚动时它才会显示滚动条。

【问题讨论】：

“永远可见”，你想隐藏滚动条吗？
@HamzaAbdaoui 对不起.. 我编辑了问题
使用overflow-y: scroll; 将始终显示垂直滚动条。你的 CSS 是正确的。但我认为它可能会被另一个类覆盖。尝试在scroll 之后添加!important。
@A.Ortogni 请您制作一个显示minimal reproducible example 的sn-p，因为您提供的代码应该可以满足您的需求

标签： html css google-chrome firefox browser

【解决方案1】：

已解决

/* width */
.table-wrapper.grouped::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.table-wrapper.grouped::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
.table-wrapper.grouped::-webkit-scrollbar-thumb {
  background: #ccc; 
  border-radius: 10px;
}

/* Handle on hover */
.table-wrapper.grouped::-webkit-scrollbar-thumb:hover {
  background: #fff; 
}

注意：它仅适用于 chrome 和 Safari

【讨论】：