顶部和底部WebKit滚动条按钮可以有不同的样式吗？

Question

我想为顶部和底部按钮创建一个具有不同border-radius的WebKit滚动条，如下所示：

这是按钮的CSS：

::-webkit-scrollbar-button
{
  border-bottom-left-radius: 8.5px;
  border-bottom-right-radius: 8.5px;
}

但是这使得两个按钮都有弯曲的底角。

有没有办法做到这一点（最好只用CSS）？

Answer 1

您可以使用

区分顶部和底部按钮

::-webkit-scrollbar-button:vertical:decrement

和

::-webkit-scrollbar-button:vertical:increment

<小时/> 的 CSS：

::-webkit-scrollbar-button:vertical:decrement {
  border-bottom-left-radius: 8.5px;
  border-bottom-right-radius: 8.5px;
} 

::-webkit-scrollbar-button:vertical:increment {
  border-top-left-radius: 8.5px;
  border-top-right-radius: 8.5px;
}

Fiddle