div上的CSS3滚动条样式答案

【问题标题】：CSS3 scrollbar styling on a divdiv上的CSS3滚动条样式
【发布时间】：2012-09-02 12:01:35
【问题描述】：

如何使用 CSS3 设置 webkit 滚动条的样式？

我的意思是这些属性：

::-webkit-scrollbar {
    width: 12px;
}
                    
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
                    
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

这是我的 div 标签：

<div class="scroll"></div>

这是我当前的 CSS：

.scroll {
    width: 200px; height: 400px;
    overflow: hidden;
}

【问题讨论】：

overflow: hidden 隐藏所有滚动条，因此无需使用 CSS3 进行装饰。您必须使用 overflow:scroll 或 overflow:auto 使滚动条可见

标签： html css scrollbar

【解决方案1】：

设置overflow: hidden 隐藏滚动条。设置overflow: scroll，确保滚动条一直出现。

要使用::webkit-scrollbar 属性，只需在调用之前定位.scroll。

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

观看直播example

【讨论】：

感谢这项工作。有没有办法为 Mozilla 浏览器做同样的事情？
没有 jQuery/JavaScript。看到这个问题stackoverflow.com/questions/6165472/…

【解决方案2】：

.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}

【讨论】：

【解决方案3】：

您正在设置overflow: hidden。这将隐藏任何对<div> 来说太大的东西，这意味着不会显示滚动条。给你的<div> 一个明确的宽度和/或高度，并将overflow 更改为auto：

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

如果您只想在内容长于<div> 时显示滚动条，请将overflow 更改为overflow: auto。您也可以使用overflow-y 或overflow-x 仅显示一个滚动条。

【讨论】：

【解决方案4】：

css3 滚动条的问题在于，只能对内容进行交互。我们无法与触摸设备上的滚动条交互。

【讨论】：