angulartypescriptangular-cdk-virtual-scroll

Is there a way to disable scroll in Angular cdk-virtual-scroll?

I would like to prevent the scrollbar from moving by default using Angular's cdk-virtual-scroll? Is there a way to do it? I have been researching a lot, but did not find a way to do it.

Solution

  • Prevent scrolling completely:

    <cdk-virtual-scroll-viewport [style.overflow]="hidden">
// or toggling:
<cdk-virtual-scroll-viewport [style.overflow]="(enableScroll$ | async) ? 'auto' : 'hidden'">

    Hide scrollbar but allow scrolling:

    <cdk-virtual-scroll-viewport [ngClass]="{hidden_scrollbar: hideScrollbar$ | async}">

.hidden_scrollbar {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* Internet Explorer 10+ */
 }
.hidden_scrollbar::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
}