Html CSS 3滚动条-添加填充和光标？

如何在滚动条上添加这两个内容

滚动条周围的填充

鼠标悬停滚动条时的光标

这是我的代码：

    #style-4::-webkit-scrollbar-track
    {
        background-color: #fff;
    }

    #style-4::-webkit-scrollbar
    {
        width: 5px;
        background-color: #fff;

    }

    #style-4::-webkit-scrollbar-thumb
    {
        background-color: #ccc;

    }

    #style-4::-webkit-scrollbar-thumb:hover
    {
        background-color: #666;
        cursor: pointer;
    }

你可以看到。我想像cssdeck上那样添加填充

可能吗？

是的，您可以添加它

    #style-4:hover{
  padding:15px;
}

---

我认为这是正确的，如果我错了，请告诉我你的期望。

试试这个

#style-4:hover{
  cursor:pointer;
}

---

关于那个填充物。从左到右的5px填充示例

#style-4::-webkit-scrollbar {
    width: 10px; /* add 5px */
    ...
}

#style-4::-webkit-scrollbar-thumb {
    box-shadow: inset 5px 0 0 0 white; /* change color to your bg color */
    ...
}

向每个

-webkit scrollbar

元素添加

光标：指针

，不幸的是，这样做不起作用