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

【问题标题】：Is it possible to have different styles for top and bottom WebKit scrollbar buttons?顶部和底部 WebKit 滚动条按钮是否可以有不同的样式？
【发布时间】：2015-04-10 03:41:46
【问题描述】：

我想为顶部和底部按钮制作一个具有不同边框半径的 WebKit 滚动条，如下所示：

这是按钮的 CSS：

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

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

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

【问题讨论】：

标签： css webkit scrollbar

【解决方案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

【讨论】：

对不起！删除了我的评论