Edit ng2-pdf-viewer scrollbar

Question

I want to change the styling of the scrollbar in my ng2-pdf-viewer... After inspecting the element, the element with the scrollbar is has a class .ng2-pdf-viewer-container

Here is my code... The css has no effect on the scrollbar.

What am I missing?

::ng-deep .ng2-pdf-viewer-container {
  -webkit-overflow-scrolling: touch;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar {
  width: 12px;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar-track {
  background-color: #0dbdaf;
}

::ng-deep .ng2-pdf-viewer-container ::-webkit-scrollbar-thumb {
  background-color: #932222;
  border-radius: 6px;
}

    <div class="contractWrap">
      <pdf-viewer
        src="{{selectedApproval.contractLink}}"
        [original-size]="false"
        [pageFit]="true"
        [zoom]="0.95"
        class="pdfer"
        [autoresize]="false"
      ></pdf-viewer>
    </div>

Answer 1

Here is the way to edit the scrollbar...

.ng2-pdf-viewer-container::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

.ng2-pdf-viewer-container::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the background color of the track */
}

.ng2-pdf-viewer-container::-webkit-scrollbar-thumb {
  background-color: #132FBD; /* Set the background color of the thumb */
  border-radius: 5px; /* Set the border radius of the thumb */
}

.ng2-pdf-viewer-container::-webkit-scrollbar-track,
.ng2-pdf-viewer-container::-webkit-scrollbar-thumb {
  /* Set the width of the track */
  border: 3px solid transparent; /* Use a transparent border to simulate the track width */
  background-clip: content-box; /* Ensure the background color only covers the content box */
}