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); 
}
​

请参阅此示例

Answer 2

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

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

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

Answer 3

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

Answer 4

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