Question

我的ngx滚动条的背景色有点问题。我无法更改背景色。我尝试修改css文件，但是此方法无效。例如，我在这里留下了堆炸弹。 enter link description here

有人可以帮助我吗？我记得在angular中，这是绝对更改类的命令，例如“ :: ngclass”，但我不确定。

Answer 1

您是指滚动条颜色还是滚动条容器的颜色？您可以通过修改以下变量来更改它

ng-scrollbar {
  --scrollbar-color: black;               /* scroll bars background color */
  --scrollbar-thumb-color: yellow;        /* scroll bar color */
  --scrollbar-thumb-hover-color: red;     /* scroll bar hover color */
  --scrollbar-container-color: green;     /* scroll bars container color */
}

我已经修改了您的Stackblitz

Answer 2

使用css，如下所示：-

ng-scrollbar {
  --scrollbar-color: black;
}

Answer 3

我已经解决并找到了可行的解决方案。使用以下代码片段更改 ngx-perfect-scrollbar（也在悬停时）的背景颜色。

在 css/scss 中，

::ng-deep .scroll-container {
    .ps__thumb-y, .ps__rail-y:hover > .ps__thumb-y {
        background-color: #209e91;
    }
}

在 html 中，

    <perfect-scrollbar #perfectScrollBar [config]="config" class="scroll-container" fxFlex="auto" [scrollIndicators]="true"(psYReachStart)="onScrollEvent($event)" 
        (psScrollDown)="onScrollEvent($event)" (psScrollY)="onScrollEvent($event)">
        ...
    </perfect-scrollbar>

Horizontal ngx-perfect-scrollbar with custom background color

如何更改ngx滚动条的背景颜色

3 个答案: