<bug> ng-scrollbar does not work properly when cdk-virtual-scroll-viewport enables both horizontal and vertical scrolling

[BppleMan]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/ngx-scrollbar

Steps to reproduce:

1. ng new project
2. add ngx-scrollbar
3. add this code

   <!--app.component.html-->
   <ng-scrollbar
       cdkVirtualScrollViewport
       externalViewport
       id="vertical"
       orientation="auto"
       visibility="visible">
   <!--Will use both horizontal and vertical scrolling-->
   <cdk-virtual-scroll-viewport itemSize="32" orientation="vertical">
       <!--texts = Array.from({length: 1000}).map((_, i) => "123457095874329857234980598743579023123457095874329857234980598743579023")-->
       <div *cdkVirtualFor="let text of texts" style="height: 32px">{{ text }}</div>
   </cdk-virtual-scroll-viewport>
   </ng-scrollbar>

   // style.scss
   :root {
   --vu-sys-default-icon-size: 16px;
   --scrollbar-thumb-color: red;
   --scrollbar-track-color: white;
   }

Expected Behavior

What behavior were you expecting to see?

Need to correctly handle the coexistence of horizontal and vertical scrolling for cdk-virtual-scroll-viewport

Actual Behavior

What behavior did you actually see?

1. no horizontal scroll

2. horizontal scroll to right

Environment

• Angular: 18
• ngx-scrollbar: 15.1.2
• Browser(s): chrome 127.0.6533.89
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[MurhafSousli]

Please fork the stackblitz instead, add the code then post the final reproduction.

[phantasma2983]

I'm having the same issue with cdk-virtual-scroll-viewport. I've forked the Stackblitz: https://stackblitz.com/edit/ngx-scrollbar-5gmgeb?file=src%2Fmain.ts

[phantasma2983]

The issues are that the horizontal scroll is not visible and the vertical scroll is aligned to the right of the .cdk-virtual-scroll-spacer since the scrollbars are injected inside the cdk-virtual-scroll-spacer element. If we just use externalViewport=".cdk-virtual-scroll-viewport" externalContentWrapper=".cdk-virtual-scroll-content-wrapper" the scrollbars positions and visibility is correct but the size based on number of elements and position of the vertical scrollbar is incorrect.

[MurhafSousli]

@phantasma2983 Its weird, I have to check why its not automatically changing the spacer width!

Here is a quick workaround for now, use the following code:

ngAfterViewInit() {
    setTimeout(() => {
      const contentWrapper: HTMLElement = document.querySelector('.cdk-virtual-scroll-content-wrapper');
      const spacer: HTMLElement = document.querySelector('.cdk-virtual-scroll-spacer');

      spacer.style.width = `${contentWrapper.clientWidth}px`;
    });
}

Working stackblitz