如何在Angular应用中全局自定义滚动条样式

失效原因 #

你的样式不生效，核心原因是当前触发滚动的容器不是html或body元素。从你给出的组件代码看，大概率是你给<main>标签设置了overflow: auto/overflow-y: scroll属性，滚动行为实际发生在<main>容器上，你针对html、body设置的滚动条规则自然不会生效。
另外你提到无内容时也显示白色滚动条，就是容器设置了overflow-y: scroll导致的，该属性会强制始终显示滚动条轨道，不管内容是否溢出。

修复步骤 #

1. 确认实际滚动容器 #

打开浏览器开发者工具，选择元素选择器点击滚动条关联区域，滚动页面查看哪个元素的scrollTop属性发生变化，该元素就是你需要绑定滚动条样式的目标容器。

2. 正确编写全局滚动条样式 #

直接在styles.scss中写入以下代码，不需要加::ng-deep（全局样式无需穿透，加了反而可能导致选择器失效）：

/* Webkit内核浏览器（Chrome、Edge、Safari）通用滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 纵向滚动条宽度，可自定义 */
  height: 8px; /* 横向滚动条高度，可自定义 */
}

::-webkit-scrollbar-track {
  background: #f0f0f0; /* 滚动条轨道颜色，可自定义 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #bbbbbb; /* 滚动条滑块颜色，可自定义 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999999; /* 滑块hover状态颜色，可自定义 */
}

/* 兼容火狐等支持CSS滚动条新标准的浏览器 */
* {
  scrollbar-width: thin; /* 滚动条宽度可选值：auto | thin | none */
  scrollbar-color: #bbbbbb #f0f0f0; /* 前值为滑块颜色，后值为轨道颜色 */
}

如果确认滚动容器是<main>标签，可追加针对性规则：

main {
  overflow-y: auto; /* 替换原来的scroll，内容溢出才显示滚动条，解决无内容也显示的问题 */
  scrollbar-width: thin;
  scrollbar-color: #bbbbbb #f0f0f0;
}

main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

3. 补充校验项 #

• 确认angular.json配置中，build.options.styles数组已包含styles.scss，全局样式正确引入
• 不要在组件样式文件中编写全局滚动条规则，组件默认开启视图封装，样式只会作用于当前组件内部

内容的提问来源于stack exchange，提问作者AyseAsude