页面高度设为100%时::-webkit-scrollbar-thumb失效，求解决方案

可能的原因及对应解决方案： #

1. Angular视图封装导致样式无法穿透

Angular默认的Emulated视图封装会给组件样式添加唯一属性选择器，导致::-webkit-scrollbar-thumb这类伪元素选择器无法正确匹配。

解决方法：

• 使用::ng-deep强制穿透视图封装，在组件的SCSS文件中添加：

::ng-deep app-overview::-webkit-scrollbar {
  width: 15px;
  background: rgb(142, 140, 140);
}

::ng-deep app-overview::-webkit-scrollbar-thumb {
  background-color: #555; /* 设置与scrollbar背景对比明显的颜色 */
  border-radius: 8px;
  border: 3px solid rgb(142, 140, 140); /* 可选：给thumb添加边框，增强区分度 */
}

• 或者将滚动条样式移至全局样式文件（如styles.scss），此时无需::ng-deep：

app-overview::-webkit-scrollbar {
  width: 15px;
  background: rgb(142, 140, 140);
}

app-overview::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 8px;
  border: 3px solid rgb(142, 140, 140);
}

• 也可以修改组件的视图封装模式为None（不推荐全局使用，避免样式污染）：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class OverviewComponent {}

2. 滚动目标容器错误

确认app-overview元素是否是实际产生滚动的容器。如果组件内部有其他元素设置了overflow: scroll，则需要将滚动条样式应用到该内部元素上，而非app-overview本身。

3. 内容不足以触发滚动

如果app-overview内部内容高度未超过容器高度，scrollbar-thumb会因为没有滚动需求而隐藏。可以临时添加足够多的测试内容验证这一点。

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