如何通过CSS设置水平滚动条的样式? [英] How can I style horizontal scrollbar by CSS?

问题描述

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

I styled my vertical scrollbars with the following code:

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

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

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

现在，我的垂直滚动条如下所示:

Now, my vertical scrollbar looks like this:

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

However, my horizontal scrollbar looks like this :

如何为它设置2-4像素的高度?

How can I set a 2-4px height for it?

推荐答案

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

因为从逻辑上讲不能强迫垂直滚动条为某个高度(因为定位的父级决定)-因此，这种 height 属性用于定位水平滚动条的高度-和 vice-versa ( width 表示垂直滚动条的宽度).).

since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).

这篇关于如何通过CSS设置水平滚动条的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！