当前位置: 首页 > 知识库问答 >
问题:

为什么滚动条是彩色的?

王辉
2023-03-14

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

null

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>

null

共有1个答案

卜昂熙
2023-03-14

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

幸运的是,滚动条的默认颜色可以通过css自定义,方法是将这个css属性添加到scrollable元素中:

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

“红”字将使滚动条为红色,“黄”字将使滚动条背景为黄色。您可以根据需要自定义它。

您可以在本教程中找到有关scroll-bar-color属性的更多信息。

 类似资料:
  • 问题内容: 在6.2章的CSS PositionedLayout Module Level(工作草案)中。粘性定位我们有以下定义:(强调我的) 甲粘粘定位的盒类似地定位到一个相对定位的盒子,但计算参考最近的祖先与偏移 滚动框 ,或者如果没有祖先具有视口 滚动框 。 这些滚动框是什么? 在文档的更下方,有一个关于术语的问题 问题6 粘性定位应真正根据最接近的可滚动祖先定义,但是CSS中其他地方目前没

  • 问题内容: 因此,经过数小时或阅读文章并查看tkinter的文档后,我发现在Windows机器上,tkinter滚动条的颜色选项将无法使用,因为滚动条直接从Windows获取其主题。我的问题是默认主题的颜色确实与我的程序冲突,因此我试图找到一种不涉及导入其他GUI程序包(例如PyQt)的解决方案(我无法在工作中访问pip,所以这是一个问题以获取新软件包) 除了使用单独的程序包之外,任何人都可以向我

  • 我已经在我的页面上实现了平滑滚动条,它的工作相当不错,但我也想在滚动内容中添加一些过渡效果。基本上,我想在一个滚动事件上做这件事,但我不知道scrollbar的工作有多流畅,以及在滚动事件上执行什么对象。我检查了#my-scrollbar没有执行此操作: 滚动事件的原因是什么?或者有没有其他的方法可以做一些额外的效果而不检查滚动事件? 编辑:我正在粘贴我的代码(我正在使用react.js)来进行更

  • 在Chrome上,页面上有一个水平滚动条,方向为rtl,与和组合,即使没有边距和内容。 有关示例,请参见https://jsfiddle.net/ht3drjae/2/.我希望看到没有绿色的背景色和没有水平滚动条,因为内部和外部应该有相同的宽度。 CSS:

  • 我正在尝试建立一个网站,有很多框,是相等的宽度和高度。例如,我有一个页面,它有两个大小相等的框并排。 简单的解决方案是将宽度和高度设置为50VW。在有滚动条之前,这工作很好。我在谷歌上搜索了好几个小时,不明白为什么大众和vh会把滚动条作为视区的一部分。 这是我的问题的一个例子 HTML CSS 注意不需要的水平滚动条 https://jsfidle.net/3z887swo/ 一个可能的解决方案是

  • 问题内容: 我正在尝试建立一个网站,其中包含许多宽度和高度相等的盒子。例如,我有一个页面,其中并排有2个相等大小的框。 简单的解决方案是将宽度和高度设置为50vw。除非有滚动条,否则效果很好。我已经在Google上搜索了几个小时,无法理解为什么大众和大众在滚动条中将滚动条作为视口的一部分。 这是我的问题的样本 HTML CSS 注意不需要的水平滚动条 一种可能的解决方案是对宽度使用百分比,对高度使