如何在div上有自定义滚动条（溢出：滚动）

Question

首先，我试图模仿社交工程网站。到目前为止，这么好，我用PHP实现了对话系统（带有一点Jquery-Ajax）。无论如何现在对于要加载特定对话的消息的消息窗口，我有溢出：滚动属性到该框，因为它在一定量的消息之后溢出。现在有一个滚动条，Bravo！但我想要我的自定义滚动条。最好是我在PS中制作的。有没有CSS解决方案？类似'scrollbar-image：url（'custombar.png'）“

我知道大多数人会建议我在javascript中制作一个。但我不希望出于以下原因 1）我对这种语言不够好，这将是一个令人生畏的过程 2）为什么在有解决方案时重新发明轮子？

在facebook对话区域看到滚动条？那个灰色性感的一个女士狗的儿子，我正在找那样的东西。启发我？

Answer 1

下面列出了css中可用于设置滚动条样式的所有伪类。

::-webkit-scrollbar  
::-webkit-scrollbar-button  
::-webkit-scrollbar-track  
::-webkit-scrollbar-track-piece    
::-webkit-scrollbar-thumb 
::-webkit-scrollbar-corner

使用这些css属性，您可以设置滚动条的样式，但您希望它甚至可以像Facebook的联系人菜单中那样。

这是一个开始;

::-webkit-scrollbar {  
    width: 12px;  
}  
::-webkit-scrollbar-track {  
    background-color: #eaeaea;  
    border-left: 1px solid #ccc;  
}  
::-webkit-scrollbar-thumb {  
    background-color: #ccc;  
}  
::-webkit-scrollbar-thumb:hover {  
    background-color: #aaa;  
}  

这将导致如下图所示。