CSS3滚动条样式在一个div上的应用

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

- Om3ga

---

overflow: hidden 会隐藏任何滚动条，因此没有任何内容可以用CSS3来装饰。你需要使用overflow:scroll或overflow:auto使滚动条可见。 - keaukraine

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

查看这个在线示例

- jacktheripper

---

谢谢，这个可行。我们能不能用同样的方法在Mozilla浏览器上实现？ - Om3ga

不使用jQuery/JavaScript是不行的。请看这个问题：https://dev59.com/7m025IYBdhLWcg3wLivo - jacktheripper

这个滚动条设计非常漂亮，我在不止一个项目中都使用过它。 - MrAlbino

Answer 2

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

- user2845300

Answer 3

你正在设置 overflow: hidden。这将隐藏任何超出 <div> 大小的内容，意味着滚动条不会显示。给你的 <div> 明确的宽度和/或高度，并将 overflow 更改为 auto：

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

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

- Bojangles

Answer 4

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

- Meisam Mulla