滚动条高度 CSS

CSS 滚动条高度属性是用于指定滚动条的高度的 CSS 属性。它允许您更改滚动条本身的高度，使其更显眼或更隐蔽。该属性仅在应用于 overflow 值为 scroll 或 auto 的元素时才有效，也就是说，当滚动条实际出现时才有效。

语法

::-webkit-scrollbar {
  height: 10px;
}

属性值

唯一的属性值是一个长度值，可以是任何 CSS 长度值，如像素（px）、百分比（%）或视窗宽度（vw）。

实例

下面的示例将为元素添加一个自定义滚动条，并使用高度属性将其高度设置为 10px。

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
  border-radius: 5px;
}

浏览器兼容性

滚动条的样式是非标准的，因此采用不同的前缀以适应不同的浏览器。以下是目前各大浏览器对于滚动条高度属性的支持情况：

• Chrome/Safari：支持高度属性。（-webkit-scrollbar-height）
• Firefox：不支持高度属性。
• IE/EDGE：不支持高度属性。

总结

CSS 滚动条高度属性是一个非标准的 CSS 属性，它允许开发者更改滚动条的高度，使其更符合页面设计的风格。不过，由于不同浏览器对于滚动条的样式的支持不同，所以在使用时需要考虑兼容性问题。