Chrome垂直和水平滚动条的独立自定义CSS样式

Question

我想对Chrome的垂直和水平滚动条应用自定义样式，因此我编写了以下CSS：

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #eff0f1;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 6px #3daee9;
    border-radius: 6px;
    border-right: solid 4px transparent;
    border-left: solid 5px transparent;
}

它对于垂直滚动条效果很好，但是对于水平滚动条效果不好，如您在此图中看到的：

我尝试将:vertical伪类应用于每个选择器（例如::-webkit-scrollbar:vertical），但似乎不受支持，什么也没发生。

是否可以对垂直和水平滚动条应用不同的样式？

预先感谢