1

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.

Chance Snow
  • 2,440
  • 1
  • 18
  • 19
deadmau5p
  • 93
  • 1
  • 9
  • Try to provide the amount of items that fit the initial view as virtual scroll needs an initial "size" definition that could be feasible. Then there's no scrolling possible as long the amount of items doesn't change. – Bernhard Jul 02 '21 at 09:09

2 Answers2

2

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;
}
R_Ice
  • 634
  • 6
  • 7
  • It works. Thanks!It should have been a feature of the virtual scroll in the first place... – rubmz Sep 16 '22 at 21:23
0

cdk-virtual-scroll-viewport tag contains itemSize attribute, put itemSize = 0, then it will render all the content.

example:

  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 03 '23 at 07:27
  • It might be not clear but working. attribute could be set like this `` – Oleg Bondarenko May 09 '23 at 14:48