To hide the scrollbar while maintaining scroll functionality, add the following:

    .pdf-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; /* Hide scrollbar but maintain scroll functionality */
    }

    .pdf-frame {
      width: 100%;
      height: 100%;
      border: none;
      position: absolute;
      top: 0;
      left: 0;
      /* Hide scrollbar while maintaining functionality */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    /* Hide WebKit scrollbar while maintaining functionality for Chrome and Safari */
    .pdf-frame::-webkit-scrollbar {
      display: none;
    }

You can read more about it here: Why does -ms-overflow-style exist?

Now, to fix the dark grey background, you will need to set the background to white using both the container and a pseudo-element and add proper centering using flexbox: https://www.w3schools.com/css/css3_flexbox.asp

Another option, you can modify the white background color to match your website's theme if needed.

Also don't forget to add #toolbar=0&navpanes=0 to the PDF URL to hide the default PDF viewer controls

Can I hide the Adobe floating toolbar when showing a PDF in browser?