📜  滚动条高度 css (1)

📅  最后修改于: 2023-12-03 15:11:09.084000             🧑  作者: Mango

滚动条高度 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 属性,它允许开发者更改滚动条的高度,使其更符合页面设计的风格。不过,由于不同浏览器对于滚动条的样式的支持不同,所以在使用时需要考虑兼容性问题。