时间戳

首页 > 解决方案 > 为什么滚动条是彩色的？

html - 为什么滚动条是彩色的？

问题描述

我试图理解 DOM 结构
，所以我添加background-color:red到正文中
，但我不明白为什么滚动条也被涂成红色？

html {

  margin: 0;
  height: 100%;
  min-height: 100%;

}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;

}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: blue;
  margin: auto;
}
<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div id="container">
    </div>
  </body>

</html>

另外，如何避免为滚动条着色？

编辑
这是它在 windows firefox 浏览器和jsfiddle上的外观 在此处输入图像描述

标签： htmlcss

解决方案

滚动条的颜色取决于浏览器。一些浏览器使滚动条的颜色与您所在的可滚动元素的背景相同。这就是滚动条变红的原因。但是，这在我的浏览器 (Firefox) 中没有发生。

幸运的是，滚动条的默认颜色可以通过将这个 css 属性添加到可滚动元素来使用 css 自定义：

.scrollable-element {
  scrollbar-color: red yellow;
}

“red”一词将使滚动条变为红色，而“yellow”一词将使滚动条背景变为黄色。您可以根据需要自定义它。

在您的代码上下文中，您应该将该属性应用于您的htmlcss 选择器（并将颜色更改为您喜欢的任何颜色）。这就是 css 文件的样子：

html {
  margin: 0;
  height: 100%;
  min-height: 100%;
  scrollbar-color: red yellow;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;
}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: blue;
  margin: auto;
}

滚动条颜色属性不适用于所有浏览器。您可以在本教程中找到有关它的更多信息。

推荐阅读