Styling

It is super easy to customize your scrollbars styles using the CSS variables

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

Here are all available 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);
  // in version >= 7 the following variables were added
  --scrollbar-thumb-transition: height ease-out 150ms, width ease-out 150ms;
  --scrollbar-track-transition: height ease-out 150ms, width ease-out 150ms;
}

If the above CSS variables are not enough, you can set custom classes to override the styles, here is an example:

<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);
    }
  }
}