How to make it look the same as in the demo

[vhp1895]

I would like to create the main scrollbar using ngx-scrollbar as the netlify app.

I try following demo code

app.component.html

<ng-scrollbar 
  #scrollable="ngScrollbar"
  position="invertY"
  viewClass="primary-bg"
  trackClass="main-scrollbar"
  appearance="compact"
>
  <p *ngFor="let a of [].constructor(100)">
</ng-scrollbar>

style.scss

html, body {
  height: 100%;
}

ng-scrollbar {
  --scrollbar-gap: 2px;
  --scrollbar-track-color: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-color: var(--color-accent);
  --scrollbar-size: 8px;
  --scrollbar-padding: 0px;
  --scrollbar-border-radius: 0px;
  --scrollbar-hover-size: 16px;
}

But nothing shows up. I would love some help.

[MurhafSousli]

Please try a reproduction first so I can see what did you try and did not work, here is the same code you posted in stracbklitz https://stackblitz.com/edit/ngx-scrollbar-wpesqk?file=src%2Fapp%2Flazy-test%2Flazy-test%2Flazy-test.component.html

[vhp1895]

i see the problem after making some changes to stackblitz link above.
In my app, I set config in AppModule like this assume rewrite config in html would override some case it need to be vertical.
App.module.ts

NgScrollbarModule.withConfig({
  track: 'horizontal',
  // few others here 
})

style.scss

body, html { 100% }
body { margin: 0 } // i lack this 

Thanks a lot for help