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

Question

如何在滚动条上添加这两个东西？

1. 围绕滚动条填充
2. 悬停滚动条时出现光标

这是我的代码:

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

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

这可能吗？

Answer 1

关于填充。从左边采样 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 元素添加 cursor: pointer 不幸的是不起作用。