Styling

NgScrollbar makes it incredibly easy to customize your scrollbars styles

<ng-scrollbar class="my-scrollbar">
  <!-- content -->
</ng-scrollbar>

Use the following CSS variables:

.my-scrollbar {
  --scrollbar-border-radius: 7px;
  --scrollbar-padding: 4px;
  --scrollbar-viewport-margin: 0;
  --scrollbar-track-color: transparent;
  --scrollbar-wrapper-color: transparent;
  --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover-color: var(--scrollbar-thumb-color);
  --scrollbar-size: 5px;
  --scrollbar-hover-size: var(--scrollbar-size);
}

If the above CSS variables are not enough, you can also set custom classes to override the styles

<ng-scrollbar trackClass="scrollbar" thumbClass="scrollbar-thumb">
  <!-- content -->
</ng-scrollbar>

::ng-deep {
  .scrollbar {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
  }
  .scrollbar-thumb {
    background-color: rgba(161, 27, 27, 0.4);
    &:hover,
    &:active {
      background-color: rgba(161, 27, 27, 0.7);
    }
  }
}