X-Axis Scrollbar Not Showing When Integrating with CDK Virtual Scroll

[rahulkutah]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/stackblitz-starters-bwrbuj3g?file=src%2Fmain.ts

Steps to reproduce:

1. Create a table or list using ng-scrollbar to handle both X and Y-axis scroll behavior.
2. Apply cdkVirtualScrollViewport for virtual scrolling in the body of the table.
3. Apply ng-scrollbar with both vertical and horizontal scroll orientation set to 'auto'.
4. Observe that the Y-axis scrollbar works, but the X-axis scrollbar does not show as expected, either being hidden or not functioning correctly.

Expected Behavior

Both the X-axis and Y-axis scrollbars should appear, with X-axis scrolling enabled horizontally and Y-axis scrolling enabled vertically. The X-axis scrollbar should work without any issues when the content exceeds the available width.

Actual Behavior

• The Y-axis scrollbar works properly, allowing for vertical scrolling through the content.
• The X-axis scrollbar does not appear or work as expected. It seems to be hidden or non-functional, even though it should be visible when horizontal scrolling is needed.

Note (Separate Issue, not directly related to X-axis):
When scrolling vertically, the Y-axis thumb (the draggable handle) aligns correctly at the top when the list is at the start. However, when scrolling to the bottom of the list, the thumb does not fully reach the bottom of the scroll area — it stops around 5 to 10px above the end instead of perfectly reaching the bottom edge.

Environment

• Angular: 18.2.13
• ngx-scrollbar: 16.1.1
• Browser(s): Google Chrome 134.0
• Operating System: Windows

[MurhafSousli]

The docs mention if you want to display both scrollbar in a virtual scroll, you should add the directive syncSpacer.

Also you shouldn't use disableSensor in this case.

Here is a working stackblitz.

Note: The table header cannot be sticky in this case, it is not related to this library. the CDK scroll may not be compatible with the structure you're using, you should figure out a workaround on your own, or use a dedicated table component with virtual scroll feature.

[rahulkutah]

@MurhafSousli the x axis scrollbar is now working, but if you scroll to the end the scrollbar jumps. Please see the attached screenshot. How to fix this????

[MurhafSousli]

The issue is related with the header.

I updated the stackblitz, this is workaround I could come so far.