如何通过CSS设置水平滚动条的样式？

我使用以下代码设置了垂直滚动条的样式:

::-webkit-scrollbar {
  width: 4px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}

现在,我的垂直滚动条看起来像这样:

但是,我的水平滚动条看起来像这样:

如何为它设置2-4px的高度？

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ? You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

从逻辑上讲,一个人不能强迫垂直滚动条为某个高度(因为由定位的父级指定) - 因此这样的height属性是以水平的滚动条高度为目标- 反之亦然(width对于垂直滚动条的宽度).