仅设计滚动条轨道

Question

我只想设计滚动条轨道，我想保留默认的按钮。我想创建像Microsoft Outlook那样的东西。

我尝试了以下css代码：

.hb-chat-scroolbar::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    width: 5px;
    background-color: #f5f5f5;
}

.hb-chat-scroolbar::-webkit-scrollbar-track
{
    border-radius: 10px;
    width: 5px;
    background-color: #f5f5f5;
}

但是如果webkit-scrollbar没有声明，那么设计就不起作用了：

.hb-chat-scroolbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

但是，如果我添加滚动条代码，箭头就会消失。

这方面有什么诀窍吗？

Answer 1

这可以设置箭头样式，但它同时设置样式，因此您可以添加带有向上和向下箭头的图标并将其放入。

  ::-webkit-scrollbar-button {
        background: #666;
        background: url(img/arrows_updown.gif); /* u get the idea */
        height: 15px;
           border-radius: 50%;
        }

也许你需要Javascript组件。