html - div 上的 CSS3 滚动条样式

Question

如何使用 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;
}    

Answer 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