ng2-pdf-viewer滚动条样式修改无效问题排查求助

问题描述 #

我尝试修改ng2-pdf-viewer组件的滚动条样式，通过元素检查定位到带滚动条的元素类名为.ng2-pdf-viewer-container，编写了对应的CSS代码但样式未生效，请问哪里遗漏了？

用户提供的代码 #

CSS代码

::ng-deep .ng2-pdf-viewer-container {
  -webkit-overflow-scrolling: touch;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar {
  width: 12px;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar-track {
  background-color: #0dbdaf;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar-thumb {
  background-color: #932222;
  border-radius: 6px;
}

HTML代码

<div class="contractWrap">
  <pdf-viewer
    src="{{selectedApproval.contractLink}}"
    [original-size]="false"
    [pageFit]="true"
    [zoom]="0.95"
    class="pdfer"
    [autoresize]="false"
  ></pdf-viewer>
</div>

排查与解决办法 #

1. 选择器权重不足 #

组件内部的默认样式可能比你的::ng-deep样式优先级更高。可以利用你给pdf-viewer添加的pdfer类提升选择器权重，或者临时用!important验证：

::ng-deep .pdfer .ng2-pdf-viewer-container::-webkit-scrollbar {
  width: 12px !important;
}

::ng-deep .pdfer .ng2-pdf-viewer-container::-webkit-scrollbar-track {
  background-color: #0dbdaf !important;
}

::ng-deep .pdfer .ng2-pdf-viewer-container::-webkit-scrollbar-thumb {
  background-color: #932222 !important;
  border-radius: 6px !important;
}

2. DOM结构判断错误 #

再次检查DOM确认滚动条所属元素：有时候组件内部可能嵌套了多层容器，滚动条实际属于.ng2-pdf-viewer-container的子元素。调整选择器路径，比如如果滚动容器是内部的.pdfViewer，就修改选择器为::ng-deep .ng2-pdf-viewer-container .pdfViewer::-webkit-scrollbar。

3. 视图封装模式冲突 #

如果你的组件设置了ViewEncapsulation.ShadowDom，::ng-deep会失效。此时把滚动条样式移到全局样式文件（如styles.css）中，不需要加::ng-deep：

.pdfer .ng2-pdf-viewer-container {
  -webkit-overflow-scrolling: touch;
}

.pdfer .ng2-pdf-viewer-container::-webkit-scrollbar {
  width: 12px;
}

.pdfer .ng2-pdf-viewer-container::-webkit-scrollbar-track {
  background-color: #0dbdaf;
}

.pdfer .ng2-pdf-viewer-container::-webkit-scrollbar-thumb {
  background-color: #932222;
  border-radius: 6px;
}

4. 浏览器兼容性问题 #

::-webkit-scrollbar仅支持WebKit内核浏览器（Chrome、Edge、Safari）。如果需要兼容Firefox，补充以下属性：

::ng-deep .ng2-pdf-viewer-container {
  scrollbar-width: thin; /* Firefox：设置滚动条宽度 */
  scrollbar-color: #932222 #0dbdaf; /* Firefox：设置滑块和轨道颜色 */
  -webkit-overflow-scrolling: touch;
}

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