I am using Angular 12. I have implemented ngx-scrollbar for my module in my angular app. Now my issue is the scroll works properly with keyboard up and down arrow keys but does not work with mouse scroll. Below is my code :-

<section class="my_page">
  <div class="my__container" id="overflowCheck">
    <ng-scrollbar appearance="compact" trackClass="prj-scrollbar" thumbClass="prj-scrollbar-thumbs">
      <div [innerHtml]='lang_LTC' class="custom_tag_"></div>
    </ng-scrollbar>
  </div>

  <div class="my__container">
    <form (ngSubmit)="onSubmit()" [formGroup]="myForm" ngNativeValidate>
      <div class="legal__section-1">
        <mat-checkbox class="example-margin" matInput formControlName="checkbox" required color="accent"></mat-checkbox>
        <div class="legal-text">

          <p>
            {{'myParagraph.paragraph3'}}
           
          </p>
        </div>
      </div>
    </form>
  </div>
</section>

CSS:-

#overflowCheck {
  background-color: $blue-black;
  height: 60vh;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: hidden; /* Add vertical scrollbar */
  border: 0.1rem solid rgba(204, 204, 204, 0.472);
  text-align: left;

}

Any assistance or better approach will be appreciated.