Simplebar: Does simplebar work with angular material's virtual scrolling?

[amoghskulkarni]

Just tried using the ngx-simplebar component inside cdk-virtual-scroll-viewport (which is used for virtual scrolling) and it didn't hide the scroll bar.

Does Simplebar support such a usage?

P.S. : package.json

   "@angular/animations": "^8.2.13",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.13",
    "@angular/core": "~8.2.13",
    "@angular/material": "^8.2.3",
    ...
    "simplebar-angular": "^2.1.0",
    ...

[jakerenzella]

@amoghskulkarni I'm trying to achieve something similar, I think it will be difficult considering we can't wrap the simplebar around Angular's cdk-virtual-scroll-viewport, as the height of the viewport is not that of all the elements in the list, but what's in the viewport.

I ended up just creating a mixin to style my components, I have tested this on MacOS, Firefox and Chrome:

$thumb-color: #969699;
$radius: 4px;

@mixin scrollable {
  scrollbar-track-color: transparent;
  scrollbar-color: $thumb-color transparent;
  overflow-y: scroll;
  scrollbar-width: thin;
  &::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    border-radius: $radius;
    background: transparent;
    transition: all 0.3s ease;
  }
  &::-webkit-scrollbar:hover {
    background: #c6c7ca;
  }
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $radius;
  }
}

Hope this helps.

[amoghskulkarni]

@jakerenzella Thanks a lot for the comment, I eventually ended up doing something very similar to what you pointed out. I was just curious if it was possible to use Simplebar's other features too.

Thanks for the help regardless!