div上的CSS3滚动条样式

Posted 2023-02-21

【中文标题】div上的CSS3滚动条样式

【英文标题】：CSS3 scrollbar styling on a div

【发布时间】：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 使滚动条可见

【参考方案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。看到这个问题***.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 滚动条的问题在于，只能对内容进行交互。我们无法与触摸设备上的滚动条交互。